Bootstrap 4: Carousel

What Is A Carousel?

As you’re reading this article you probably already know but just in case…

A carousel is basically a slideshow that can automatically cycle through elements, most commonly images but slides of text and custom markup also work.

They are built using CSS 3D transforms and also use some Javascript. You should be aware that carousels are generally not compliant with accessibility standards.

On top of the slides themselves, carousels can have previous / next controls to allow the user to manually navigate the slides; indicators to show which slide is currently active; and captions for each individual slide. None of these elements (other than the slides) are essential.

If all you’re interested in is creating a carousel with all those bits and don’t want to see how to build the bits separately just scroll down to the bottom of the article and read “The Kitchen Sink Carousel”.

You can also find worked examples you can try for yourself here.

Adding The Slides

If you just want your carousel to cycle a bunch of images automatically you’re in luck as there’s not a great deal of markup and you can copy what I’ve got below. This sort of carousel is most commonly found above the fold on websites in place of a single hero image.

Some things to think about / remember are the following:

You need to put .active on one of the slides otherwise the carousel will not be visible. The slide with .active against it will be the starting slide for your carousel.
Set a unique id for each .carousel

Code

<div id="myCarousel" 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 class="carousel-item">
   <img src="..." class="d-block w-100" alt="...">
  </div>
 </div>
</div>

Explanation

.carousel is the class you add to your first <div> . This class creates the carousel.

.slide creates the smooth, default transition / animation effect between slides. You don’t need to add this class at all… the carousel will still work without it. I’ve not included it here but you can also add .carousel-fade to change the slide effect into a fade transition (you still need to keep .slide for that to work).

data-ride="carousel" is used to activate the carousel making it autoplay when loaded.

.carousel-inner is placed on your next <div> and is used to add slides to your carousel.

.carousel-item is used to wrap the content of each slide. Don’t forget to add .active to one of your slides!

You will notice that I have added the classes .d-block and .w-100 to each of the images. That is to prevent browsers using their default image alignment.

Adding Next / Previous Controls

If you want to give your users the ability to scroll through your slides themselves then you’ll need to add the next / previous controls to your carousel. These are the little arrows on the left and right of the slides.

Code

<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
 <span class="carousel-control-next-icon" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
</a>

Explanation

The code for the controls goes directly after your .carousel-inner, remaining inside your .carousel.

.carousel-control-prev and .carousel-control-prev-icon make your “previous” icon on the left of your carousel.

.carousel-control-next and .carousel-control-next-icon make your “next” icon on the right of your carousel.

You need to make sure that on each of the <a> tags you add an href containing the id of your carousel. As normal you should also add role="button" to them too.

data-slide="prev" and data-slide="next" specifies which slide should come up next.

You’ll notice I’ve added <span class="sr-only"> on each of the controls. This is for accessibility purposes as it allows screen readers to tell users what the button is for. Also for accessibility reasons, you should add aria-hidden="true" to each of .carousel-control-prev-icon and .carousel-control-next-icon.

Adding Indicators

The indicators are marks at the bottom of the slides which show how many slides there are in the carousel and which slide the user is viewing. They also act like buttons, allowing the user to navigate to a particular slide.

Code

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

Explanation

The indicators are formed using an <ol> with each <li> representing one of the indicators.

First you need to add .carousel-indicators to the <ol>.

You need to set the data-target on each of the <li> to the id of your carousel. This is to associate the indicators with the carousel.

Next you should add thedata-slide-to attribute to each of the <li>. You will need to number each of these, starting with zero and going up from there in single increments. Your first <li> will therefore have data-slide-to="0" on it, your second data-slide-to="1" and so on.

data-slide-to differs from the data-slide attribute we used on the controls in so much that you can add numbers rather than simply next and prev to them. This is what allows the user to skip to a particular slide by clicking on the relevant indicator.

Finally, you need to add .active to the first slide (the one you want to appear when the carousel loads).

Adding Captions

If you would like to add some captions to your slides you can do so easily. The captions will appear at the bottom of the slides, just above the indicators.

Code

<div class="carousel-caption d-none d-md-block">
 <h5>Caption Title</h5>
 <p>Caption text</p>
</div>

Explanation

To create your captions you need to wrap your desired text in a <div> with the .carousel-caption class applied to it. You’ll notice I have also added .d-none and d-md-block to that <div>. Those two classes mean the captions will not appear on smaller devices. You do not need to add those if you don’t want to.

The code shown above sits inside your .carousel-item and should be placed after the <img> tag.

You’ll notice I’ve used <h5> and <p> tags to write my captions but you can use whatever you think suits your carousel best.

The Kitchen Sink Carousel

So it’s time to put all the above into a single carousel. You’ll see I’ve added some placeholder images and text this time so you’ve got everything you need to easily create your carousel.

<!-- Initialise carousel -->
<div id="kitchenSink" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
 <ul class="carousel-indicators">
  <li data-target="#kitchenSink" data-slide-to="0" class="active"></li>
  <li data-target="#kitchenSink" data-slide-to="1"></li>
  <li data-target="#kitchenSink" data-slide-to="2"></li>
  <li data-target="#kitchenSink" data-slide-to="3"></li>
 </ul>
<!-- The slides -->
 <div class="carousel-inner">
  <div class="carousel-item active">
   <img src="https://via.placeholder.com/250x150/0000FF?text=+" class="d-block w-100" alt="blue rectangle">
   <div class="carousel-caption d-none d-md-block">
    <h5>Blue</h5>
    <p>The sky is this colour</p>
   </div>
  </div>
  <div class="carousel-item">
   <img src="https://via.placeholder.com/250x150/008000?text=+" class="d-block w-100" alt="green rectangle">
   <div class="carousel-caption d-none d-md-block">
    <h5>Green</h5>
    <p>Grass is this colour</p>
   </div>
  </div>
  <div class="carousel-item">
   <img src="https://via.placeholder.com/250x150/000000?text=+" class="d-block w-100" alt="black rectangle">
   <div class="carousel-caption d-none d-md-block">
    <h5>Black</h5>
    <p>The night is this colour</p>
   </div>
  </div>
  <div class="carousel-item">
   <img src="https://via.placeholder.com/250x150/FF0000?text=+" class="d-block w-100" alt="red rectangle">
   <div class="carousel-caption d-none d-md-block">
    <h5>Red</h5>
    <p>Stop lights are this colour</p>
   </div>
  </div>
 </div>
<!-- Carousel controls -->
 <a class="carousel-control-prev" href="#kitchenSink" data-slide="prev">
  <span class="carousel-control-prev-icon"></span>
 </a>
 <a class="carousel-control-next" href="#kitchenSink" data-slide="next">
  <span class="carousel-control-next-icon"></span>
 </a>
      
</div>