Bootstrap Carousel Slider with Thumbnails

Bootstrap Carousel Slider with Thumbnails - examples & tutorial

Responsive Carousel Slider with Thumbnails built with the latest Bootstrap 5. An improved version of the standard Bootstrap Carousel Image Gallery additionally equipped with thumbnails.

To learn more read Carousel Docs.

Video tutorial


Basic example

        
            
          <!-- Carousel wrapper -->
          <div
            id="carouselExampleIndicators"
            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
              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
              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-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-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-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

        
            
        <!-- Carousel wrapper -->
      <div id="carouselMDExample" 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
          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
          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-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-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-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>