Bootstrap carousel indicators, next, previous and animations not working

user_1460758 0
Viewed 326

I am having the following problems getting the Bootstrap Carousel working:

  1. Indicators are not showing up at all.
  2. The Next and Previous button glyphicons are not working. Instead of left and right chevrons they are just displaying text. And they are both on the bottom left of the carousel div container instead of showing up in the middle vertically on the left and right sides. Also the functionality is not working.
  3. The animation stops after going from active slide 1 to slide 2.

When I first get the barebones example in there it seem to animate. But as I add in styling it seems to slow from about every 3 seconds to 10 seconds. And now at this point it stalls after the first time going from slide 1 to 2.

Here is the code for the page:

div.c-wrapper {
  background-color: black;
  width: 65%;
  margin: auto;
  border: 1px solid black;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Car 1 Details</title>
  <script src="https://www.w3schools.com/lib/w3.js"></script>
  <!-- jQuery JavaScript -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <!-- Bootstrap JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  <!-- Bootstrap CSS -->
  <!-- CSS only: not combined with popper -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div w3-include-html="include/header.html"></div>

  <div class="container-fluid py-4">
    <h3 class="text-center bg-primary py-2" style="border:1px solid black;">Car 1 Details</h3>
    <!-- Bootstrap Carousel -->
    <div class="c-wrapper">
      <div id="cars-carousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#cars-carousel" data-slide-to="0" class="active"></li>
          <li data-target="#cars-carousel" data-slide-to="1"></li>
          <li data-target="#cars-carousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="Slide 1">
          </div>
          <div class="carousel-item">
            <img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="Slide 2">
          </div>
          <div class="carousel-item">
            <img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="Slide 3">
          </div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#cars-carousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#cars-carousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <!-- end Bootstrap Carousel -->
  </div>

  <div class="spacer"></div>

  <div w3-include-html="include/footer.html"></div>
</body>

enter image description here

enter image description here

Goes from slide 1 to slide 2 after about 4 seconds and stops.

carousel twitter-bootstrap
1 Answers

Bootstrap 4+ doesn't use Glyphicons. See https://getbootstrap.com/docs/5.1/extend/icons. Fixing that by loading the library and updating the markup shows the icons.

Also, your markup is wrong for the controls. See https://getbootstrap.com/docs/5.1/components/carousel/#with-controls. Fixing that by updating the classes shows the controls in the correct locations.

Then, all data attributes must be formatted as data-bs-* for BS5. This is mostly to avoid collisions with other libraries. Fixing that fixes your indicators and eliminates the console error.

Finally, the screen reader class for BS5 is visually-hidden. See https://getbootstrap.com/docs/5.1/content/typography. Fixing that hides the control text properly and gets the controls working.

One other thing worth mentioning is that Bootstrap 5 doesn't have a jQuery dependency. See https://getbootstrap.com/docs/5.1/getting-started/javascript/#dependencies. Only load it if you have custom jQuery code.

The key, of course, is to reference the correct documentation, especially when updating an older application.

div.c-wrapper {
  background-color: black;
  width: 65%;
  margin: auto;
  border: 1px solid black;
}
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css" integrity="sha512-1fPmaHba3v4A7PaUsComSM4TBsrrRGs+/fv0vrzafQ+Rw+siILTiJa0NtFfvGeyY5E182SDTaF5PqP+XOHgJag==" crossorigin="anonymous"
    referrerpolicy="no-referrer" />

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid py-4">
    <h3 class="text-center bg-primary py-2" style="border:1px solid black;">Car 1 Details</h3>
    <!-- Bootstrap Carousel -->
    <div class="c-wrapper">
      <div id="cars-carousel" class="carousel slide" data-bs-ride="carousel">

        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-bs-target="#cars-carousel" data-bs-slide-to="0" class="active"></li>
          <li data-bs-target="#cars-carousel" data-bs-slide-to="1"></li>
          <li data-bs-target="#cars-carousel" data-bs-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="Slide 1">
          </div>

          <div class="carousel-item">
            <img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="Slide 2">
          </div>

          <div class="carousel-item">
            <img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="Slide 3">
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control-prev" href="#cars-carousel" data-bs-slide="prev">
          <i class="bi bi-chevron-left"></i>
          <span class="visually-hidden">Previous</span>
        </a>

        <a class="right carousel-control-next" href="#cars-carousel" data-bs-slide="next">
          <i class="bi bi-chevron-right"></i>
          <span class="visually-hidden">Next</span>
        </a>
      </div>
    </div>
  </div>
</body>

user_12648040
Related