Carousel with Bootstrap

Slides Only

The .active class needs to be added to one of the slides otherwise the carousel will not be visible..d-block and .w-100 on carousel images to prevent browser default image alignment.

With Controls

Use the .carousel-control-prev & .carousel-control-next through previous and next controls. We recommend using <button> elements, but you can also use <a> elements with role="button".

With Indicators

Use the .carousel-indicators through carousel indicates.

With Captions

Add captions to your slides easily with the .carousel-caption element within any .carousel-item.

Cross-Fade

Add .carousel-fade to your carousel to animate slides with a fade transition instead of a slide. Depending on your carousel content.

Individual Carousel-Item Interval

Add data-bs-interval="" to a .carousel-item to change the amount of time to delay between automatically cycling to the next item.

Disable Touch Swiping

Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the data-bs-touch attribute.

Dark Variant

Add .carousel-dark to the .carousel for darker controls, indicators, and captions.

Swiper Sliders

Vertical Slider

Height of image can be set by adding vertical-sweeper & sweeper-h classes and images will be swept vertically.

Nested Swiper

Height of image can be set by adding nested-horizontal-swiper & sweeper-h classes and images will be swept vertically & horizontally.

Mouse Wheel Variant

Height of image can be set by adding mouseweel-swiper & sweeper-h classes and images will be swept through mouseweel.

Auto Play Variant

Height of image can be set by adding autoplay-swiper & sweeper-h classes and images will be swept autoplay.

Effect Coverflow

Height of image can be set by adding coverflow-slider classes and images will be swept 3D way.