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.

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://mdbootstrap.com/img/Photos/Slides/img%20(88).webp"
                  class="d-block w-100"
                  alt="..."
                />
              </div>
              <div class="carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).webp"
                  class="d-block w-100"
                  alt="..."
                />
              </div>
              <div class="carousel-item">
                <img
                  src="https://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(31).webp"
                  class="img-fluid"
                />
              </button>
            </div>
            <!-- Thumbnails -->
          </div>
          <!-- Carousel wrapper -->

Material Design styling