Skip to main content
K
KevinB9
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
    Nancy OSheaCommunity 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
    K
    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

    B
    Community Expert
    Ben MCommunity Expert
    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.

    O
    osgood_
    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices