Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Carousel

Carousel is used to create an image slide show for the webpage to make it look more attractive.

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript.

It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.


How to Create a Carousel

The following example shows how to create a basic carousel with indicators and controls:

Run code

Example explained:

The .carousel creates a carousel and .slide adds a CSS transition and animation effect when sliding from one item to the next.

The .carousel-indicators adds indicators to the carousel. These are the dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing).

The .carousel-inner adds slides to the carousel.

The .carousel-item specifies the content of each slide.

The .active class needs to be added to one of the slides otherwise the carousel will not be visible.

The presence of the .d-block and .w-100 on carousel images to prevent browser default image alignment.

The .carousel-control-prev adds a previous button to the carousel, which allows the user to go back between the slides.

The .carousel-control-next adds a next button to the carousel, which allows the user to go forward between the slides.

The .carousel-control-prev-icon creates a previous icon.

The .carousel-control-next-icon creates a next icon.

Indicator & Control elements must have a data-target attribute (or href for links) that matches the ID of the .carousel element.



Add Captions to Slides

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

They can be easily hidden on smaller viewports, as shown below, with display utilities.

We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.

Run code

The Crossfade Effect

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

Run code

Changing Slide interval

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

Run code

Complete Bootstrap 4 Carousel Reference

For a complete reference of all carousel options, methods and events, visit our Bootstrap 4 JS Carousel Reference.