Bootstrap 4 carousel

Report · Feb 03, 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!

Kevin from Cambridge

Report · Feb 03, 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.

Report · Feb 03, 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.

Report · Feb 03, 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 & Moderator

Report · Feb 03, 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

Bootstrap 4 carousel

1 Correct answer