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.

Video tutorial


Basic example

A simple bootstrap slider with arrows and thumbnails as controls.

        
            
          <!-- 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.

        
            
          <!-- 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>