Bootstrap 5 Carousel with thumbnails as navigator indicators
Tags: bootstrap5, carousel, thumbnails, indicators
Published: 2024-02-26 12:23:51

In this post I'll show you how to include thumbnails pictures as [Bootstrap 5 Carousel navigators indicators](https://getbootstrap.com/docs/5.3/components/carousel/):
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yhrhit1bc7kmuej4u43.gif)

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](https://stackblitz.com/edit/stackblitz-starters-immwvx)