Slideshow
Bootstrap 5 Slideshow component
Responsive Slideshow built with Bootstrap 5. Examples of adding controls, slideshow buttons: square and rounded, dark variant, automatic slide and more.
Basic example
Here’s a slideshow with slides only. Note the presence of the .d-block and
.w-100 on carousel images to
prevent browser default image alignment.
<div id="carouselExampleSlidesOnly" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
alt="Wild Landscape" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
alt="Exotic Fruits" />
</div>
</div>
</div>
Adding Controls
You can add the previous and next controls:
<div id="carouselExampleControls" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
alt="Wild Landscape" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
alt="Exotic Fruits" />
</div>
</div>
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleControls"
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="#carouselExampleControls"
data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Slideshow buttons
You can also add buttons to the slideshow, alongside the controls, too.
<div id="carouselExampleIndicators" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
alt="Wild Landscape" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
alt="Exotic Fruits" />
</div>
</div>
<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>
</div>
Square buttons
To change the shape of buttons, you have to add width and height to these
elements. Also check the documentation about square buttons.
<div id="carouselExampleIndicators" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
alt="Wild Landscape" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
alt="Exotic Fruits" />
</div>
</div>
<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>
</div>
#square-buttons {
width: 10px;
height: 10px
}
Rounded buttons
To change the shape of buttons to rounded, you have to also add border-radius to these
elements. You'll find more information about border-radius here.
<div id="carouselExampleIndicators" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
alt="Wild Landscape" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
alt="Exotic Fruits" />
</div>
</div>
<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>
</div>
#square-buttons {
width: 10px;
height: 10px;
border-radius: 100%
}
With text
Add captions to your slides easily with the .carousel-caption element within any
.carousel-item. They can be easily hidden on smaller viewports, as shown below, with
optional display utilities. We
hide them initially with .d-none and bring them back on medium-sized devices with
.d-md-block.
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
<div id="carouselExampleCaptions" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
alt="Wild Landscape" />
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
alt="Exotic Fruits" />
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleCaptions"
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="#carouselExampleCaptions"
data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Dark variant
Add .carousel-dark to the .carousel for darker controls, indicators, and
captions. You'll find more information about dark mode here.
.webp)
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
.webp)
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.webp)
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
<!-- Carousel wrapper -->
<div id="carouselDarkVariant" data-mdb-carousel-init class="carousel slide carousel-fade carousel-dark"
data-mdb-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators">
<button data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="1" aria-label="Slide 1"></button>
<button data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="2" aria-label="Slide 1"></button>
</div>
<!-- Inner -->
<div class="carousel-inner">
<!-- Single item -->
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(19).webp" class="d-block w-100"
alt="Motorbike Smoke" />
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(35).webp" class="d-block w-100"
alt="Mountaintop" />
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(40).webp" class="d-block w-100"
alt="Woman Reading a Book" />
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselDarkVariant"
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="#carouselDarkVariant"
data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Carousel wrapper -->
Automatic slide
You can change the length of delay between items by setting
data-mdb-interval="". Add this option to the class .carousel-item.
<div id="carouselExampleInterval" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-mdb-interval="1000">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
alt="Wild Landscape" />
</div>
<div class="carousel-item" data-mdb-interval="3000">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
</div>
<div class="carousel-item" data-mdb-interval="5000">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
alt="Exotic Fruits" />
</div>
</div>
<button class="carousel-control-prev" data-mdb-target="#carouselExampleInterval" type="button"
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" data-mdb-target="#carouselExampleInterval" type="button"
data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Manual slide
If you don't want an automatic slide, you have to set data-mdb-interval="false".
<div id="carouselExampleInterval2" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel"
data-mdb-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
alt="Wild Landscape" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
alt="Exotic Fruits" />
</div>
</div>
<button class="carousel-control-prev" data-mdb-target="#carouselExampleInterval2" type="button"
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" data-mdb-target="#carouselExampleInterval2" type="button"
data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Without loop
To stop cycling at the end of a slideshow, you have to add data-mdb-wrap="false" to the
main
div.
<div id="carouselExampleInterval5" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel"
data-mdb-wrap="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
alt="Wild Landscape">
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera">
</div>
<div class="carousel-item" data-mdb-wrap="false">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
alt="Exotic Fruits">
</div>
</div>
<button class="carousel-control-prev" data-mdb-target="#carouselExampleInterval5" type="button"
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" data-mdb-target="#carouselExampleInterval5" type="button"
data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Product Cards
Here’s an example slideshow with product cards which have star ratings.
<div id="carouselExampleInterval4" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
<div class="carousel-inner mx-auto w-50 rounded shadow-4">
<div class="carousel-item active">
<div class="card shadow-4 d-block">
<div class="d-flex justify-content-between p-3">
<p class="lead mb-0">Today's Combo Offer</p>
<div
class="bg-info rounded-circle d-flex align-items-center justify-content-center shadow-1-strong"
style="width: 35px; height: 35px;">
<p class="text-white mb-0 small">x4</p>
</div>
</div>
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/4.webp"
class="card-img-top" alt="Laptop" />
<div class="card-body">
<div class="d-flex justify-content-between">
<p class="small"><a href="#!" class="text-muted">Laptops</a></p>
<p class="small text-danger"><s>$1099</s></p>
</div>
<div class="d-flex justify-content-between mb-3">
<h5 class="mb-0">HP Notebook</h5>
<h5 class="text-body mb-0">$999</h5>
</div>
<div class="d-flex justify-content-between mb-2">
<p class="text-muted mb-0">Available: <span class="fw-bold">6</span></p>
<div class="ms-auto text-warning">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card shadow-4 d-block">
<div class="d-flex justify-content-between p-3">
<p class="lead mb-0">Today's Combo Offer</p>
<div
class="bg-info rounded-circle d-flex align-items-center justify-content-center shadow-1-strong"
style="width: 35px; height: 35px;">
<p class="text-white mb-0 small">x2</p>
</div>
</div>
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/7.webp"
class="card-img-top" alt="Laptop" />
<div class="card-body">
<div class="d-flex justify-content-between">
<p class="small"><a href="#!" class="text-muted">Laptops</a></p>
<p class="small text-danger"><s>$1199</s></p>
</div>
<div class="d-flex justify-content-between mb-3">
<h5 class="mb-0">HP Envy</h5>
<h5 class="text-body mb-0">$1099</h5>
</div>
<div class="d-flex justify-content-between mb-2">
<p class="text-muted mb-0">Available: <span class="fw-bold">7</span></p>
<div class="ms-auto text-warning">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="d-flex justify-content-between p-3">
<p class="lead mb-0">Today's Combo Offer</p>
<div
class="bg-info rounded-circle d-flex align-items-center justify-content-center shadow-1-strong"
style="width: 35px; height: 35px;">
<p class="text-white mb-0 small">x3</p>
</div>
</div>
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/5.webp"
class="card-img-top" alt="Gaming Laptop" />
<div class="card-body">
<div class="d-flex justify-content-between">
<p class="small"><a href="#!" class="text-muted">Laptops</a></p>
<p class="small text-danger"><s>$1399</s></p>
</div>
<div class="d-flex justify-content-between mb-3">
<h5 class="mb-0">Toshiba B77</h5>
<h5 class="text-body mb-0">$1299</h5>
</div>
<div class="d-flex justify-content-between mb-2">
<p class="text-muted mb-0">Available: <span class="fw-bold">5</span></p>
<div class="ms-auto text-warning">
<i class="fa fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleInterval4"
data-mdb-slide="prev">
<i class="fas fa-chevron-circle-left fa-2x rounded-circle shadow-3" style="color:#616161"></i>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-mdb-target="#carouselExampleInterval4"
data-mdb-slide="next">
<i class="fas fa-chevron-circle-right fa-2x rounded-circle shadow-3" style="color:#616161"></i>
<span class="visually-hidden">Next</span>
</button>
</div>
Full page
An example of full-page usage of the slideshow with text overlay.
Click on the image to see a live demo.
