 |
VOOZH | about |
|
VOOZH | about |
Bootstrap 5 Carousel is a slideshow component for cycling through images or slides, allowing users to showcase multiple pieces of content in a visually appealing and interactive way. It offers various options for customization and responsive design.
Bootstrap Carousel Classes:
| Class | Description |
|---|---|
| carousel | Applied to the main container div to initialize the carousel. |
| carousel-slide | Applied to individual slides within the carousel. |
| carousel-inner | Applied to a container div to hold all the slides. |
| carousel-item | Applied to each slide within the carousel inner container. |
| carousel-control-prev | Applied to the left navigation control button. |
| carousel-control-next | Applied to the right navigation control button. |
| carousel-control-prev-icon | Applied to the icon inside the left navigation control button. |
| carousel-control-next-icon | Applied to the icon inside the right navigation control button. |
| carousel-indicators | Applied to a container ul to hold the slide indicators. |
| active | Applied to the active slide and indicator to indicate the currently displayed slide. |
.carousel-caption | to add a caption to the slide. |
Example: This is a Bootstrap 5 carousel with previous and next arrows styled black. It displays images with slide indicators and navigation controls, allowing users to navigate through the carousel slides.
Output:
Use .carousel-caption class inside the .carousel-item class to add a caption to the slide.
Example: Bootstrap Carousel with indicators, captions, and navigation controls. Customized indicators and captions with Bootstrap classes. Slide transition and navigation controlled by Bootstrap JavaScript.
Output:
