Bootstrap 5

How to change Bootstrap’s carousel indicators to thumbnail images

Darcy Paterson

Nov 2, 2023  
Bootstrap

In Bootstrap 5, the carousel has great functionality but doesn’t have image thumbnails for slide indicators. In this tutorial you’ll see how easy it is to modify the carousel indicators.

Images improve the user experience

You’ll likely have your own reason for wanting to use images as indicators but for me it’s about giving a better user experience. Buttons alone don’t give users a preview of what to expect next when they press the button. A thumbnail image gives a clear idea of what’s next. It allows the user to navigate to exactly what image they want to see without having to scroll. This is especially useful for e-commerce.

The markup

I start with the basic Bootstrap carousel markup. The previous and next arrows have been removed. The carousel indicator buttons enclose an img tag. There’s a few classes that have been added to start the styling. A finished product would likely see a little more refinement but it works good enough for the demo.

<div id="carouselExampleIndicators" class="carousel slide carousel-fade my-5">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
            aria-current="true" aria-label="Slide 1">
            <img src="./img/yoga-pants-front.jpg" class="img-fluid d-block mx-auto" alt="" />
        </button>

        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">
            <img src="./img/yoga-pants-back.jpg" class="img-fluid d-block mx-auto" alt="" />
        </button>

        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">
            <img src="./img/yoga-pants-front-close-up.jpg" class="img-fluid d-block mx-auto" alt="" />
        </button>

        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4">
            <img src="./img/yoga-pants-back-pocket.jpg" class="img-fluid d-block mx-auto" alt="" />
        </button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="./img/yoga-pants-front.jpg" class="d-block w-100 img-fluid" alt="yoga pants" />
        </div>
        <div class="carousel-item">
            <img src="./img/yoga-pants-back.jpg" class="d-block w-100 img-fluid" alt="yoga pants" />
        </div>
        <div class="carousel-item">
            <img src="./img/yoga-pants-front-close-up.jpg" class="d-block w-100 img-fluid" alt="yoga pants" />
        </div>
        <div class="carousel-item">
            <img src="./img/yoga-pants-back-pocket.jpg" class="d-block w-100 img-fluid" alt="yoga pants" />
        </div>
    </div>
</div>

There it is. Simple and easy to do. To see a live version check it out on CodeSandBox.