Bootstrap Carousel
Bootstrap Carousel is a slideshow component that can be used to showcase images or other content on a webpage in a dynamic and interactive way.
Bootstrap carousel can be easily implemented using HTML, CSS, and JavaScript code.
As an example:
In this example:
- We have a container element that contains the
myCarousel element, which is the carousel itself. - The
carousel-inner class contains the slides, and the carousel-item class defines each individual slide. - The
carousel-caption class can be used to add a caption to each slide. - The
carousel-indicators class adds pagination bullets to the carousel, which allows the user to quickly navigate between slides. - The
carousel-control-prev and carousel-control-next classes define the previous and next arrow icons that can be used to navigate between slides.
Crossfade Carousel
A crossfade carousel is a variation of the Bootstrap carousel that provides a smooth transition between slides by fading out the current slide and fading in the next slide.
As an example:
In this example:
- The carousel has the
carousel-fade class, which enables the crossfade effect. - The
carousel-inner contains three carousel-items, each with an image and a caption. - The first item has the active class to show it first.
- The
carousel-controls are standard Bootstrap carousel controls, with icons and hidden text.
Autoplaying carousels
You can add the data-bs-interval attribute to the carousel element, with a value in milliseconds that specifies the time between transitions.
As an example:
In this example:
- The carousel has the carousel slide classes, and the
data-bs-ride and data-bs-interval attributes to enable autoplay. - The
data-bs-interval attribute has a value of 2000ms, which is 2 seconds. - The
carousel-inner contains three carousel-items, each with an image. - The first item has the
active class to show it first. - The carousel loops infinitely, and the time between transitions is specified by the
data-bs-interval attribute.