Slideshow
Bootstrap 5 Slideshow component
Responsive slideshow built with the latest Bootstrap 5. Slideshow is a component which cycles through different elements such as photos, videos, or text. Many examples and easy tutorials.
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.
Adding controls
You can add the previous and next controls:
Slideshow buttons
You can also add buttons to the slideshow, alongside the controls, too.
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.
#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.
#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.
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.
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.
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.
Automatic slide
You can change the length of delay between items by setting
data-mdb-interval="". Add this option to the class .carousel-item.
Manual slide
If you don't want an automatic slide, you have to set data-mdb-interval="false".
Without loop
To stop cycling at the end of a slideshow, you have to add data-mdb-wrap="false" to the
main
div.
Product Cards
Here’s an example slideshow with product cards which have star ratings.
Full page
An example of full-page usage of the slideshow with text overlay.
Click on the image to see a live demo.
