Bootstrap Carousel

Carousel is a slideshow for cycling through series of content - images or slides of text. It also includes support for previous or next controls and indicators.

The .active class needs to be added to one of the slides otherwise the carousel is not visible. Also, set a unique id on the .carousel for optional controls, especially if you are using multiple carousels on a single page. Control and indicator elements must have a data-target attribute (or href for links) that matches the id of the .carousel element.

1. Simple Carousel with Slides

For a simple carousel, you need to add three classes:

  1. carousel slide
  2. carousel-inner
  3. carousel-item

Also, add .active class to one of the items.

For example,

<div id="carouselExample" class="carousel slide" data-ride="carousel">
 <div class="carousel-inner">
 <div class="carousel-item active">
 <img src="/..." class="d-block w-100" alt="...">
 </div>
 <div class="carousel-item">
 <img src="/..." class="d-block w-100" alt="...">
 </div>
 <div class="carousel-item">
 <img src="/..." class="d-block w-100" alt="...">
 </div>
 </div>
</div>

The presence of the .d-block and .w-100 on carousel images prevent browser default image alignment. The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load.

2. Adding Controls: Previous and Next

The previous and next controls are generated using <a> element. The href attribute should match with the id attribute of the carousel.

<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
 <span class="carousel-control-next-icon" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
 </a>

3. Indicators

You can also add the indicators to the carousel. The indicators are generated as ordered list with class .carousel-indicators. The data-target attribute of <li> element should match with the id of the carousel.

<ol class="carousel-indicators">
 <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
 <li data-target="#carouselExample" data-slide-to="1"></li>
 <li data-target="#carouselExample" data-slide-to="2"></li>
 </ol>

4. Captions

You can add captions to your slides with the .carousel-caption element within any .carousel-item. For example,

<div class="carousel-item active">
 <img src="/..." class="d-block w-100" alt="...">
 <div class="carousel-caption d-none d-md-block">
 <h5>First slide label</h5>
 <p>Some text goes here.</p>
 </div>
 </div

Captions can be hidden on smaller viewports with optional display utilities. For example, here these are hidden initially with .d-none and bring them back on medium-sized devices with .d-md-block.

5. Fade

You can add .carousel-fade to the carousel to animate slides with a fade transition instead of a slide. For example,

<div id="carouselExample" class="carousel slide carousel-fade" data-ride="carousel">

</div>

6. Time Delay

You can add data-interval attribute to a .carousel-item to change the amount of time to delay between automatically cycling to the next item. For example,

<div class="carousel-item" data-interval="2000">

The default value is 5000. If the value is false, then the carousel will not automatically cycle.