Tutorials References Menu

Bootstrap 4 JS Carousel


Carousel CSS Classes

For a tutorial about Carousels, read our Bootstrap Carousel Tutorial.

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
.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
Try it Yourself »

Via data-* Attributes

The data-ride="carousel" attribute activates the carousel.

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.

Example

<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">

<!-- Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>

<!-- Carousel Controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
  <span class="carousel-control-prev-icon"></span>
</a>
Try it Yourself »

Via JavaScript

Enable manually with:

Example

// Activate Carousel
$("#myCarousel").carousel();

// Enable Carousel Indicators
$(".item").click(function(){
  $("#myCarousel").carousel(1);
});

// Enable Carousel Controls
$(".carousel-control-prev").click(function(){
  $("#myCarousel").carousel("prev");
});
Try it Yourself »

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 Try it
interval number, or the boolean false 5000 Specifies the delay (in milliseconds) between each slide.

Note: Set interval to false to stop the items from automatically sliding
Using JS Using data
keyboard boolean true Specifies whether the carousel should react to keyboard events:

  • true - the carousel can be navigated (next and previous) with the keyboard left and right arrows
  • false - the carousel can NOT be navigated with the keyboard left and right arrows
Using JS Using data
pause string, or the boolean false "hover" Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel

Note: Set pause to false to stop the ability to pause on hover
Using JS Using data
wrap boolean true Specifies whether the carousel should go through all slides continuously, or stop at the last slide

  • true - cycle continuously
  • false - stop at the last item
Using JS Using data

Carousel Methods

The following table lists all available carousel methods.

Method Description Try it
.carousel(options) Activates the carousel with an option. See options above for valid values Try it
.carousel("cycle") Goes through the carousel items from left to right Try it
.carousel("pause") Stops the carousel from going through items Try it
.carousel(number) Goes to a specified item (zero-based: first item is 0, second item is 1, etc..) Try it
.carousel("prev") Goes to the previous item Try it
.carousel("next") Goes to the next item Try it
.carousel("dispose") Destroys a carousel

Carousel Events

The following table lists all available carousel events.

Event Description Try it
slide.bs.carousel Occurs when the carousel is about to slide from one item to another Try it
slid.bs.carousel Occurs when the carousel has finished sliding from one item to another Try it

The slid and slide events also has additional properties:

Property Description Try it
direction Returns the direction the carousel is sliding (left or right)
relatedTarget Returns the DOM element that is being slid into place as the active item Try it
from Returns the index of where the previous item came from, when moving on to the next one Try it
to Returns the index of the next item Try it