Why won't my Bootstrap carousel slide properly?

I am facing an issue with implementing a carousel in my web development course on udemy. Despite applying the necessary controls, the carousel doesn't seem to work as expected.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac8c5c5ded9ded8cbdaea9e849c849b">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<section id="testimonials">
        <div id="carousel-testimonials" class="carousel slide " data-ride="carousel">
          <div class="carousel-inner">
            
            <div class="carousel-item active">
              <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
              <img class="dog-image" src="images/dog-img.jpg" alt="dog-profile">
              <em>Pebbles, New York</em>
            </div>
    
            <div class="carousel-item ">
              <h2 id="testimonial-text" class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of
                their
                life. I think.</h2>
              <img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
              <em>Beverly, Illinois</em>
            </div>
          </div>
          <a class="carousel-control-prev" href="#carousel-testimonials" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carousel-testimonials" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </section>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5832292d3d2a21186b766d7669">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4a4bba4a4b1a6fabea794e5fae5e2fae5">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385a57574c4b4c4a5948780c160e1609">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

htmlcssbootstrap-4

Answer №1

This is a practical example sourced from the Bootstrap website. Hopefully, this information proves to be beneficial for you. Simply modify the SRC with the image of your preference!

I have implemented this using Bootstrap 5 as it's the most recent version. Below you can find your updated example in Bootstrap 4. It's possible that you may have missed out on including the necessary JS libraries. Hope this clears things up for you! 

<!doctype html>
<html lang="en">

<head>
    <title>StackOverflow</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS v5.0.2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="197b76766d6a6d6b7869592c3729372b">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>

<body>
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <p>Item 1</p>
                <img src="http://via.placeholder.com/640x360
                " class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <p>Item 2</p>

                <img src="http://via.placeholder.com/640x360
                " class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <p>Item 3</p>

                <img src="http://via.placeholder.com/640x360
                " class="d-block w-100" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
    </div>

    <!-- Bootstrap JavaScript Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88ebe7faedc8baa6b1a6ba">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23414c4c57505751425363160d130d11">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>

</html>

Utilizing Bootstrap 4 alongside your existing code;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d6d19031b031c">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<section id="testimonials">
    <div id="carousel-testimonials" class="carousel slide " data-ride="carousel">
        <div class="carousel-inner">

            <div class="carousel-item active">
                <h2>Slide 1</h2>
                <img class="dog-image" src="https://www.fillmurray.com/640/360
                " alt="dog-profile">
                <em>Pebbles, New York</em>
            </div>

            <div class="carousel-item ">
                <h2 id="testimonial-text" class="testimonial-text">Slide 2</h2>
                <img class="testimonial-image" src="https://www.fillmurray.com/640/360
                " alt="lady-profile">
                <em>Beverly, Illinois</em>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carousel-testimonials" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel-testimonials" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed879c98889f94addec3d8c3dc">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64140b141401164a0e1724554a55524a55">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a7a61666167746555213b233b24">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

Answer №2

Experience a carousel demonstration with easy control options by trying out new content and images. Make sure to also include the bootstrap-4 CDN link in the script tag for smooth functionality :)

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span> </a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position the image slider uniformly at the bottom using CSS (utilizing the Slick Carousel library)

I am utilizing the slick carousel library to create a unique and elegant slider. However, when using images with varying heights, I am encountering issues in aligning the images at the same bottom: https://i.stack.imgur.com/ab5s3.png Here is my code snip ...

htmlcssslick.js

Displaying Text and Images on a Sliding Carousel with a Static Background Image

I am currently experimenting with the Materializecss Image Slider. My goal is to have a fixed full-screen background image while the texts and images slide over it. Initially, I tried setting the background-color of the slider class as transparent, but un ...

javascripthtmlcssslidermaterialize

Navigating the Drift

I am a beginner in HTML/CSS and need some assistance. Here is the layout I am working with: <style> #main {background-color: red; width: 30%;} #right_al{float: right;} #to_scroll{overflow: scroll;} </style> <div id='main'> ...

htmlcss

Creating a JavaScript function that converts data from JSP to JavaScript using single

I am struggling to pass a string into a JavaScript function successfully. Despite trying multiple approaches, I have not been able to make it work. <a href="javascript:goFac('<%=name%>')"><%=name%></a> The variable "name ...

javascripthtmljspescaping

Is there a way to transform JSON into HTML with PHP?

I am attempting to reverse engineer the function referenced in this discussion: [Post][1] [1]: https://stackoverflow.com/a/23427469/19867306 @scozy demonstrated a function for converting HTML text to a JSON model. Now, I need to convert the same JSON mode ...

phphtmljson

Is there a way for an input form to completely fill a table data cell without increasing the width of the entire row?

I would like to add a row of text inputs at the bottom of my table, with each input having the same size as the widest element in their respective rows. I have tried setting the width to 100%, but this ends up expanding the entire row, which is not the des ...

phphtmlcsshtml-table

Ways to divide the header column of a bootstrap 4 table?

Currently, I am delving into the realm of frontend development and facing a challenge with designing a table. My goal is to merge multiple columns into a single column by dividing them into cells. I am aware of the bootstrap classes colspan and rowspan, ho ...

htmlbootstrap-4tablecell

An Iframe lacks the ability to showcase HTML content, unlike a browser which is capable of doing

I'm struggling to get my Iframe to show the html string properly. Here's the content of the string: var='<BODY style="MARGIN: 0px" bgColor=#ffffff marginwidth="0" marginheight="0"> <SCRIPT language=JavaScript> var Caller_User_Ty ...

javascriptjqueryhtmliframe

Failure to include jQuery and CSS in the AJAX response

Having trouble with my slider. The script that is added at runtime is not showing up in the ajax response. Does anyone know why this might be happening? $.ajax({ url:"ajax_get_response_eng_to_change.php", type:"POST", async:true, data:{c ...

jquerycssajax

Utilizing CSS for creating dynamic columns within a Bootstrap row

Is there a way to dynamically change the background color of each section in a bootstrap row based on percentages passed through? For example, if I pass in percentages of 30, 40, 20, and 10, the divs should appear in green, red, yellow, and purple respecti ...

cssangulartwitter-bootstrap-3less

Ways to extract code within delimiters

After loading a template from a file, the structure is as follows: [[style]].someclass{padding:10px 15px}[[/style]] [[code]]<tr><td class="someclass">{{text}}</td></tr>[[/code]] The template is loaded using .get() and stored in th ...

javascriptjqueryhtmlcss

Is it possible to automatically adjust the size of components on a html/cshtml page based on the current window size?

Currently, I am facing an issue with my website where multiple panels are created using a foreach loop that includes textareas/textboxes. Whenever I resize my browser window, it messes up the UI by shifting the position of the textareas and other elements. ...

javascripthtmlcssrazorasp.net-mvc-5

The Heroku application is rendering with different CSS and positioning compared to the local development environment

My locally hosted site has correct CSS and positioning, but once deployed to Heroku, it appears to lose some of its CSS styles. I am using the MERN Stack for this project. I suspect that the issue may be related to my node_modules, even though I have them ...

cssnode.jsreactjsherokubootstrap-4

Is there a way to create a fixed container aligned to the right and have the parent container handle scrolling?

My setup is as follows: Full width, 100px height header The header is always visible at the top. Full width, remaining height details The content of details can scroll vertically and horizontally. A fixed 200px width, full height container is right- ...

htmlcss

AngularJS: Utilizing $http to fetch XML data instead of JSON

Looking to extract data from a website using angularjs / javascript. I am familiar with the $http object in angularjs which can make get requests. I have used it before to retrieve json, but I'm wondering if I can use it for XML (HTML) as well? (I th ...

javascripthtmlxmlangularjs

Ways to access the HTML file displayed in the FireFox new tab interface

After opening a new tab in Firefox, I stumbled upon an HTML file that I had believed to be lost after overwriting it on my server. Surprisingly, it's nowhere to be found in my home folder. How can I retrieve it without risking clicking on it and poten ...

htmlfilefirefoxcaching

Is there a way to customize these columns if they are not affected by CSS?

When visiting the tti-fl.com website, I noticed that there are pages with columns that aren't responding to the CSS. Even though I've successfully used flex-box before, these specific columns under .categories-wrapper and .content-block just won& ...

jquerycsswordpressflexbox

Is there a way to identify the specific list item that a draggable element has been dropped onto within a jQuery sortable with connected draggable lists?

Take a look at these two sets of items: user's inventory <ul id='list1'> <li>Apple</li> <li>Banana</li> </ul>available products <ul id='list2'> <li>Orange</li> ...

javascriptjqueryhtmljquery-ui

Maintain consistent content height within a Bootstrap card

I have two Bootstrap cards and I want to ensure they maintain the same height, but the content inside .card-body <div class="col-md-6"> <div class="card"> <img class="card-img-top" data-src="hol ...

htmlcssbootstrap-4

What methods are available for testing JavaScript interactions like freehand drawing on an HTML5 canvas using a mouse?

When it comes to testing object states, I am well-versed in using rspec in Ruby on Rails models. For instance, ensuring that a certain object meets certain expectations based on its prior state and a specific call. However, I am now faced with a new chall ...

jqueryhtmlcanvastddjasmine