How do I create carousel thumbnails that control the main carousel?

Asked on Aug 28, 2025

1 Answer

To create a carousel with thumbnails that control the main carousel in Bootstrap 5, you can use the carousel component along with custom JavaScript to handle the thumbnail clicks.

<!-- BEGIN COPY / PASTE -->
        <div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="image1.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="image2.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="image3.jpg" class="d-block w-100" alt="...">
                </div>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-4">
                <img src="image1.jpg" class="img-thumbnail" data-bs-target="#mainCarousel" data-bs-slide-to="0" alt="...">
            </div>
            <div class="col-4">
                <img src="image2.jpg" class="img-thumbnail" data-bs-target="#mainCarousel" data-bs-slide-to="1" alt="...">
            </div>
            <div class="col-4">
                <img src="image3.jpg" class="img-thumbnail" data-bs-target="#mainCarousel" data-bs-slide-to="2" alt="...">
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The main carousel is created using the `carousel` class and `carousel-inner` for the slides.
Each thumbnail image is linked to a specific slide using `data-bs-target` and `data-bs-slide-to`.
Ensure that the number in `data-bs-slide-to` corresponds to the index of the slide you want to show.
The thumbnails are styled with `img-thumbnail` for a consistent appearance.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions