Why is my Carousel not working on Bootstrap v5.2?

Salma A. 0
Viewed 13

I tried to use carousel and i have two carousel items but only one is showing and the carousel doesn't work when i press prev or next. I checked the code many times and i still can't figure out where the error is.

Here is my code:



<!DOCTYPE html>
<html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TinDog</title>

  <!-- css stylesheets -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">

<!-- bootstrap scripts -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</head>


<div id="testimonial-carousel" class="carousel slide" data-ride="false">
  <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="testimonial-img" src="images/dog-img.jpg" alt="dog-profile">
      <em>Pebbles, New York</em>
    </div>

     <div class="carousel-item">
       <h2 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-img" src="images/lady-img.jpg" alt="lady-profile">
       <em>Beverly, Illinois</em>
     </div>
  </div>

  <a class="carousel-control-prev" href="#testimonial-carousel" 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="#testimonial-carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
```
slideshow carousel bootstrap-5
2 Answers

With bootstrap 5 you need to be using bs in you attributes. For example here you are using data-slide="prev" so with bootstrap 5 you should be using data-bs-slide. You also would need to add data-bs-target="#testimonial-carousel" to you anchor tag and remove the href if possible because here it is not needed.

I hope this help.

DiMalle0

Found the solution, apparently in Bootstrap 5, all such attributes have been renamed from data-* to data-bs-*. Thus all data attributes in Bootstrap 5 now contain bs as an infix.

Salma A.0
Related