Carousel With Bootstrap 4

Bootstrap 4 Carousel

Bootstrap 4 carousel displays series of text ,image and custom information to the user within certain duration. It also provides previous/next controls option to see the upcoming information or before displaying information and indicators that indicates active slider information.

Example

The bootstrap carousel is used to show text, image and custom information to the user within certain duration. It has controls options that shows upcoming or previous information.

Example

Source Code

Try it now

Source Code : Output

Class Description

Class Description
.carousel .carousel class Creates a carousel
.carousel-indicators .carousel-indicators indicates little dots at the bottom of each slide.Active indicators indicates user is veiwing current slider.
.carousel-inner .carousel-inner is a container for all carousel items.
.carousel-item .carousel-item contains the text and image information.
.carousel-control-prev .carousel-control-prev class provides a left (previous) button to the carousel that allows to see previous slides.
.carousel-control-next .carousel-control-next displays a a right (next) button to the carousel, that displays next slide information.
.carousel-control-prev-icon .carousel-control-prev-icon is used with .carousel-control-prev to create a "previous" button
.carousel-control-next-icon .carousel-control-next-icon is used with .carousel-control-next to create a "next" button
.slide .slide creates a transition and animation when sliding from one item to the next.

Online Test / Quiz