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 JS Carousel

Carousel CSS Classes

Carousel is a slideshow component for cycling through elements — images or slides of text.

Class Description
.carousel Creates a carousel
.carousel-indicators Adds indicators for the carousel. These are the little 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)
.carousel-inner Adds slides to the carousel
.carousel-item Specifies the content of each slide
.carousel-control-prev Adds a left (previous) button to the carousel, which allows the user to go back between the slides
.carousel-control-next Adds a right (next) button to the carousel, which allows the user to go forward between the slides
.carousel-control-prev-icon Used together with .carousel-control-prev to create a "previous" button
.carousel-control-next-icon Used together with .carousel-control-next to create a "next" button
.carousel-caption Specifies a caption for the carousel
.carousel-fade Animate slides with a fade transition instead of a slide
.slide Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect

For a tutorial about Carousel, visit our Bootstrap 4 Carousel Tutorial.


Via data-* Attributes

Use data attributes to easily configure the carousel:

  • The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load
  • The data-slide and data-slide-to attributes specifies which slide to go to
  • The data-slide attribute accepts two values: prev or next, while data-slide-to accept numbers
Run code

Via JavaScript

Enable manually with:

Run code

Carousel Options

Options can be passed via data attributes or JavaScript.

For data attributes, append the option name to data-, as in data-interval="".

Name Type Default Description Example
interval number 5000 The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. Demo
keyboard boolean true Whether the carousel should react to keyboard events. Demo
pause string | boolean "hover"

If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.

On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.

Demo
ride string false Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load. Demo
wrap boolean true Whether the carousel should cycle continuously or have hard stops. Demo
touch boolean true Whether the carousel should support left/right swipe interactions on touchscreen devices.

Carousel Methods

The following table lists all available carousel methods:

Method Description Example
$().carousel(options) Activates the carousel with an optional options object. See options above for valid values Demo
$().carousel("cycle") Cycles through the carousel items from left to right Demo
$().carousel("pause") Stops the carousel from cycling through items Demo
$().carousel(number) Cycles the carousel to a particular frame (zero-based: first item is 0, second item is 1, etc..) Demo
$().carousel("prev") Cycles to the previous item Demo
$().carousel("next") Cycles to the next item Demo
$().carousel("dispose") Destroys a carousel

Carousel Events

The following table lists all available carousel events:

Event Description Example
slide.bs.carousel This event fires immediately when the slide instance method is invoked Demo
slid.bs.carousel This event is fired when the carousel has completed its slide transition Demo

Both events have the following additional properties:

  • direction: The direction in which the carousel is sliding (either "left" or "right")
  • relatedTarget: The DOM element that is being slid into place as the active item
  • from: The index of the current item
  • to: The index of the next item