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.

images/coding/coding10.webp

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.