Bootstrap Carousel Slider with Thumbnails

Bootstrap 5 Carousel Slider with Thumbnails component

Learn how to build a responsive carousel with Bootstrap 5. Tutorial & templates for image gallery slider with thumbnails. Vertical carousel example included.

MDB 5 - Bootstrap 5 & Material Design Buttons Tutorial

Video tutorial

Basic example

A simple bootstrap slider with arrows and thumbnails as controls.

Bootstrap 5 Extended Carousel with Thumbnails

Show code Edit in sandbox

HTML

<!-- Carousel wrapper -->
<div id="carouselExampleIndicators" data-mdb-carousel-init class="carousel slide carousel-fade" data-mdb-ride="carousel">
  <!-- Slides -->
  <div class="carousel-inner mb-5">
    <div class="carousel-item active">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(88).webp" class="d-block w-100" alt="..." />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(121).webp" class="d-block w-100"
        alt="..." />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(31).webp" class="d-block w-100" alt="..." />
    </div>
  </div>
  <!-- Slides -->

  <!-- Controls -->
  <button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleIndicators"
    data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselExampleIndicators"
    data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
  <!-- Controls -->

  <!-- Thumbnails -->
  <div class="carousel-indicators" style="margin-bottom: -20px;">
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="0" class="active"
      aria-current="true" aria-label="Slide 1" style="width: 100px;">
      <img class="d-block w-100"
        src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(88).webp" class="img-fluid" />
    </button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="1"
      aria-label="Slide 2" style="width: 100px;">
      <img class="d-block w-100"
        src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(121).webp" class="img-fluid" />
    </button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="2"
      aria-label="Slide 3" style="width: 100px;">
      <img class="d-block w-100"
        src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(31).webp" class="img-fluid" />
    </button>
  </div>
  <!-- Thumbnails -->
</div>
<!-- Carousel wrapper -->

Material Design styling

This carousel looks more pleasant thanks to the rounded corners and shadow applied in accordance with Material Design guidelines.

Bootstrap 5 & Material Design Extended Carousel with Thumbnails

Show code Edit in sandbox

HTML

<!-- Carousel wrapper -->
<div id="carouselMDExample" data-mdb-carousel-init class="carousel slide carousel-fade" data-mdb-ride="carousel">
  <!-- Slides -->
  <div class="carousel-inner mb-5 shadow-1-strong rounded-3">
    <div class="carousel-item active">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(88).webp" class="d-block w-100" alt="..." />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(121).webp" class="d-block w-100"
        alt="..." />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(31).webp" class="d-block w-100" alt="..." />
    </div>
  </div>
  <!-- Slides -->

  <!-- Controls -->
  <button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselMDExample"
    data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselMDExample"
    data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
  <!-- Controls -->

  <!-- Thumbnails -->
  <div class="carousel-indicators" style="margin-bottom: -20px;">
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselMDExample" data-mdb-slide-to="0" class="active"
      aria-current="true" aria-label="Slide 1" style="width: 100px;">
      <img class="d-block w-100 shadow-1-strong rounded"
        src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(88).webp" class="img-fluid" />
    </button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselMDExample" data-mdb-slide-to="1" aria-label="Slide 2"
      style="width: 100px;">
      <img class="d-block w-100 shadow-1-strong rounded"
        src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(121).webp" class="img-fluid" />
    </button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselMDExample" data-mdb-slide-to="2" aria-label="Slide 3"
      style="width: 100px;">
      <img class="d-block w-100 shadow-1-strong rounded"
        src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(31).webp" class="img-fluid" />
    </button>
  </div>
  <!-- Thumbnails -->
</div>

eCommerce gallery (vertical thumbnails)

An example of a bootstrap product carousel with zoom effect and vertical thumbnails, adjusted to eCommerce projects.

To learn more read eCommerce Gallery Docs, you can also explore more useful eCommerce design blocks.

Note: This component requires MDBootstrap Pro package.

Show code Edit in sandbox

HTML

<div class="ecommerce-gallery vertical" data-mdb-ecommerce-gallery-init>
  <div class="row">
    <div class="col-4 col-sm-3">
      <div class="multi-carousel vertical" data-mdb-multi-carousel-init data-mdb-items="3">
        <div class="multi-carousel-inner">
          <div class="multi-carousel-item active">
            <img
              src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
              data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
              alt="Table full of spices"
              class="active w-100"
            />
          </div>
          <div class="multi-carousel-item">
            <img
              src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
              data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
              alt="Winter Landscape"
              class="w-100"
            />
          </div>
          <div class="multi-carousel-item">
            <img
              src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
              data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
              alt="View of the City in the Mountains"
              class="w-100"
            />
          </div>
          <div class="multi-carousel-item">
            <img
              src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
              data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
              alt="Place Royale Bruxelles"
              class="w-100"
            />
          </div>
        </div>
        <button
          class="carousel-control-prev"
          tabindex="0"
          type="button"
          data-mdb-slide="prev"
        >
          <span
            class="carousel-control-prev-icon"
            aria-hidden="true"
          ></span>
        </button>
        <button
          class="carousel-control-next"
          tabindex="0"
          type="button"
          data-mdb-slide="next"
        >
          <span
            class="carousel-control-next-icon"
            aria-hidden="true"
          ></span>
        </button>
      </div>
    </div>
    <div class="col-8 col-sm-9">
      <div class="lightbox" data-mdb-lightbox-init>
        <img
          src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
          alt="Table full of spices"
          class="ecommerce-gallery-main-img active w-100"
        />
      </div>
    </div>
  </div>
</div>

Bootstrap Carousel Slider with Thumbnails

Bootstrap 5 Carousel Slider with Thumbnails component

Basic example

Material Design styling

eCommerce gallery (vertical thumbnails)

Related resources