why my bootstrap carousel is not working? - html

Question

the carousel shows me the first image that's it , it is like the slider is bloked, the buttons not working either
<main>
<div id="slider" class="carousel slide" data-mdb-ride="carousel">
<div class="carousel-inner" >
<div class="carousel-item active">
<img src="images/hero1.png" class="d-block w-100" alt="Wild Landscape">
</div>
<div class="carousel-item ">
<img src="images/hero2.jpg" class="d-block w-100" alt="Camera">
</div>
<div class="carousel-item ">
<img src="images/hero3.jpg" class="d-block w-100" alt="Exotic Fruits">
</div>
</div>
<button class="carousel-control-prev" type="button" data-mdb-target="#slider" data-mdb-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-mdb-target="#slider" data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</main>
<script src="js/bootstrap.min.js"></script>

Answer 1

Attention to the bootstrap version used.
In version 5.2 for example you need to use as:
data-bs-ride data-bs-target data-bs-slide
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<main>
<div id="slider" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" >
<div class="carousel-item active">
<img src="images/hero1.png" class="d-block w-100" alt="Wild Landscape">
</div>
<div class="carousel-item ">
<img src="images/hero2.jpg" class="d-block w-100" alt="Camera">
</div>
<div class="carousel-item ">
<img src="images/hero3.jpg" class="d-block w-100" alt="Exotic Fruits">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#slider" 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="#slider" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</main>
Hope this helps.