Bootstrap Carousel Slider with Thumbnails
Bootstrap 5 Carousel Slider with Thumbnails component
Basic example
A simple bootstrap slider with arrows and thumbnails as controls.
.webp)
.webp)
.webp)
<!-- 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>
eCommerce gallery (vertical thumbnails)
An example of a bootstrap product carousel with zoom effect and vertical thumbnails, adjusted to eCommerce projects.
To learn more read eCommerce Gallery Docs, you can also explore more useful eCommerce design blocks.
Note: This component requires MDBootstrap Pro package.
<div class="ecommerce-gallery vertical" data-mdb-ecommerce-gallery-init>
<div class="row">
<div class="col-4 col-sm-3">
<div class="multi-carousel vertical" data-mdb-multi-carousel-init data-mdb-items="3">
<div class="multi-carousel-inner">
<div class="multi-carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button
class="carousel-control-prev"
tabindex="0"
type="button"
data-mdb-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
</button>
<button
class="carousel-control-next"
tabindex="0"
type="button"
data-mdb-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
</button>
</div>
</div>
<div class="col-8 col-sm-9">
<div class="lightbox" data-mdb-lightbox-init>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
</div>
</div>