Skip to main content
Inspiring
February 3, 2021
Answered

Bootstrap 4 carousel

  • February 3, 2021
  • 3 replies
  • 677 views

Can anyone help me with my Bootstrap 4 carousel? It seems straightforward but I can't get it to advance! It is stuck on the first slide. Also the forward and back arrows do not work and the indicators at the bottom do not work. I can see all the code and I have all the relevant css and js files. Help!

 

Kevin from Cambridge

    This topic has been closed for replies.
    Correct answer KevinB9

    Thanks to all who replied. Much appreciated.

     

    I was able to solve the problem by uninstalling Dreamweaver 2021 and reinstalling, so there must have been some corrupt code somewhere.

     

    Kevin

    3 replies

    Nancy OShea
    Community Expert
    Community Expert
    February 3, 2021

    Can anyone help me with my Bootstrap 4 carousel? It seems straightforward but I can't get it to advance! It is stuck on the first slide. Also the forward and back arrows do not work and the indicators at the bottom do not work. I can see all the code and I have all the relevant css and js files. Help!

    ==============

    Hi @KevinB9,

    I'm guessing your code is messed up somewhere.  Compare this working example with what you have.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Bootstrap Carousel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--latest Bootstrap on CDN-->
    <link rel="stylesheet" href="
    https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    </head>
    
    <body>
    <h3>Bootstrap 4.5 Carousel</h3>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
    <div class="carousel-item active">
    <img class="d-block w-100" src="https://dummyimage.com/1200x400" alt="First slide">
    <h3 class="carousel-caption">Slide 1</h3>
    </div>
    <div class="carousel-item">
    <img class="d-block w-100" src="https://dummyimage.com/1200x400" alt="Second slide">
    <h3 class="carousel-caption">Slide 2</h3>
    </div>
    <div class="carousel-item">
    <img class="d-block w-100" src="https://dummyimage.com/1200x400" alt="Third slide">
    <h3 class="carousel-caption">Slide 3</h3>
    </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
    </a>
    </div>
    
    <!--First jQuery, then Popper then Bootstrap-->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    </body>
    </html>
    

     

    Post back if you still need help.

     

    Nancy O'Shea— Product User & Community Expert
    KevinB9AuthorCorrect answer
    Inspiring
    February 4, 2021

    Thanks to all who replied. Much appreciated.

     

    I was able to solve the problem by uninstalling Dreamweaver 2021 and reinstalling, so there must have been some corrupt code somewhere.

     

    Kevin

    Community Expert
    February 3, 2021

    Best bet is to post a link, but if you wanted to start diving into the next steps, open up the inspector in your browser and look at the console to see if there are any errors being generated by the page. In some cases you may have other scripts that conflict with the carousel that need to be troubleshooted.

    Legend
    February 3, 2021

    Can you paste your code in the forum so someone can see what might be incorrect or better still upload the page to a remote server and provide a url link if that is possible.