Dynamic Look and Manageable Content: Mastering the Bootstrap Carousel

You already know using jumbotrons is the way to go whenever you need to display some information that your users simply cannot miss. Now, what should you do if you have more than one piece of such information?

Stacking a bunch of jumbotrons beats the purpose: the lower ones receive way less attention, and the page looks stuffy. If you decide to use Bootstrap carousel, however, each piece will act a bit like a real carousel horse: the user will be able to see them all in turn.

You have probably encountered Bootstrap carousel examples in various websites. Businesses often use them to display multiple offers they have at the time. Basically, it works as a slideshow, a set of elements that get shown one by one.

Bootstrap Carousel: Main Tips

• Using Bootstrap 4, you can create a carousel.
• A carousel is a Bootstrap slideshow that is used to display an element from a set of other elements.
• Bootstrap carousels are often used to display important information in easily readable portions which you can cycle through.

Creating Carousels

Creating a Bootstrap carousel requires you to create three groups of elements:

• Indicators
• Slideshow
• Left/right controls

To begin making our Bootstrap carousel example, you will need to create a <div> element that you will put all of the script into. The container of the carousel must have an id attribute set, the class attribute with the value of carousel slide and the data-ride attribute with the carousel value.

After this first step, the HTML for the carousel we are building will look like this:

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

Indicators

The first set of elements we will work on is called indicators. They are used to simplify navigating through the carousel.

Each indicator represents a particular slide of the carousel. If you see it highlighted, you are on the slide it represents. You can also click on the indicators to be taken to a certain slide. To create a set of indicators, you need to create a list. First, the <ul> element needs to have the .carousel-inner class.

The indicators themselves are <li> elements with the data-target attribute value set to the id of the container of the whole carousel. In addition to that, they also need to have the data-slide-to attribute with the numeric value representing their position in the index of slides, beginning with 0.

One of these indicators should have a .active class, indicating that it represents the slide that is currently being displayed:

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

Bootstrap Slideshow

The slideshows are what makes the carousel. A slideshow must first be wrapped in a <div> container with the .carousel-inner class. Inside it, you can create the slides.

A slide is created by using a <div> container with the .carousel-item class and adding .active to the one that is currently supposed to be displayed. Inside these elements, you may enter whatever content you would like to be shown on the slide. In this case, we will add an image to display in the background of the slide and a heading:

<div class="carousel-inner">
<div class="active carousel-item">
  <img alt="Slide1" src="s1.jpg">
  <div class="carousel-caption">
    <h2>Slide 1</h2>
  </div>
</div>
<div class="carousel-item">
  <img alt="Slide2" src="s2.jpg">
  <div class="carousel-caption">
    <h2>Slide 2</h2>
  </div>
</div>
<div class="carousel-item">
  <img alt="Slide3" src="s3.jpg">
  <div class="carousel-caption">
    <h2>Slide 3</h2>
  </div>
</div>
</div>

Carousel Controls

Lastly, we are going to need controls for navigating to adjacent slides in the carousel. To do this, will simply create two <a> elements. Both of them need to have the href attribute set to the ID of the carousel itself.

Then, the first link is going to be assigned the .carousel-control-prev class and have the data-slide attribute with the value prev. The second link is going to be assigned the class .carousel-control-next and have the data-slide attribute with the value next. Inside those elements, we can have a <span> element with a class which assigns an appropriate icon.

With this, you will have arrows displayed on the sides of the carousel, which allows you to move to slides adjacent to the active one:

<a href="#carousel" class="carousel-control-prev" data-slide="prev">
    &lt;
</a>
<a href="#carousel" class="carousel-control-next" data-slide="next">
    &gt;
</a>

The Complete Code

Finally, we can put all of these sets of elements together to get our Bootstrap carousel example. The complete result is an interactive element which displays one slide at a time:

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

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

<div class="carousel-inner">
<div class="active carousel-item">
  <img alt="Slide1" src="s1.jpg">
  <div class="carousel-caption">
    <h2>Slide 1</h2>
  </div>
</div>
<div class="carousel-item">
  <img alt="Slide2" src="s2.jpg">
  <div class="carousel-caption">
    <h2>Slide 2</h2>
  </div>
</div>
<div class="carousel-item">
  <img alt="Slide3" src="s3.jpg">
  <div class="carousel-caption">
    <h2>Slide 3</h2>
  </div>
</div>
</div>

<a href="#carousel" class="carousel-control-prev" data-slide="prev">
    &lt;
</a>
<a href="#carousel" class="carousel-control-next" data-slide="next">
    &gt;
</a>

</div>

Bootstrap Carousel: Summary

• The latest version of Bootstrap allows you to create carousel components.
• Basically, a carousel is a Bootstrap slideshow used to only show one element at a time out of a specific set.
• You can use them to make divide content into portions that a user can then cycle through.