Skip to main content

Carousel in Bootstrap 5

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:

Editor

Loading...

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.

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:

Editor

Loading...

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:

Editor

Loading...

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.