Bootstrap 5 Carousel with thumbnails as navigator indicators

swckd — Mon, 26 Feb 2024 12:23:51 +0000

In this post I'll show you how to include thumbnails pictures as Bootstrap 5 Carousel navigators indicators:

First, start by creating the Carousel following Bootstrap´s documentation:

 <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img
            data-bs-toggle="modal"
            data-bs-target="#myModal"
            src="http://via.placeholder.com/640x360/blue"
            class="d-block w-100 rounded"
          />
        </div>
        <div class="carousel-item">
          <img
            data-bs-toggle="modal"
            data-bs-target="#myModal"
            src="http://via.placeholder.com/640x360/pink"
            class="d-block w-100 rounded"
          />
        </div>
        <div class="carousel-item">
          <img
            data-bs-toggle="modal"
            data-bs-target="#myModal"
            src="http://via.placeholder.com/640x360/green"
            class="d-block w-100 rounded"
          />
        </div>
        <div class="carousel-item">
          <img
            data-bs-toggle="modal"
            data-bs-target="#myModal"
            src="http://via.placeholder.com/640x360/yellow"
            class="d-block w-100 rounded"
          />
        </div>
      </div>

In this code, the Carousel starts with:
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
And we need to create the section carousel-innner, which holds the carousel items.
<div class="carousel-inner">
The carousel items must be composed of:

        <div class="carousel-item">
          <img
            src="http://via.placeholder.com/640x360/yellow"
            class="d-block w-100 rounded"
          />
        </div>

Then, we create the indicators section, composed of:

The holding div with carousel-indicators class. <div class="carousel-indicators m-auto">
A button with data-bs-target, and data-bs-slide-to (starting from 0)
The img of the thumnail

        <button
          type="button"
          data-bs-target="#myCarousel"
          class="active thumbnail-indicator"
          data-bs-slide-to="0"
        >
          <img
            src="http://via.placeholder.com/80x80/blue"
            class="active d-block w-100 rounded"
          />
        </button>

And the CSS will look something like this:

.carousel-indicators {
  position: unset !important;
}
.carousel-indicators [data-bs-target] {
  opacity: 1;
  background-color: transparent !important;
  width: 80px !important;
  height: 80px !important;
}

.thumbnail-indicator {
  position: relative;
  overflow: hidden;
}

.thumbnail-indicator img {
  width: 100%;
  height: auto;
}

After the indicators, you can optionally add the arrows to move from one slide to the other:

      <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#myCarousel"
        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="#myCarousel"
        data-bs-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>

The full code can be found here: https://stackblitz.com/edit/stackblitz-starters-immwvx

DEV Community: swckd

Bootstrap 5 Carousel with thumbnails as navigator indicators