How to build a Bootstrap Carousel

If you’re here, you probably know already what the deal with Bootstrap is. But just in case, before going over our subject — Bootstrap Carousels — let’s go over what this framework can do and most of the time do great.

Brief Intro

Bootstrap is an open source web development framework that does wonders when it comes to designing mobile-friendly, responsive web pages.

As you’ve probably already guessed, we are huge fans of Bootstrap and if you’re wondering why let me just give you several reasons:

4–5 hours of learning Bootstrap from the official site is all it takes for you to be able to start using it and loving it
Very customizable
Consistency across devices
Using Bootstrap is so much easier than using Pure CSS media queries
Super fast development

Let us now talk about building one of the Stars of Bootstrap, also known as…

The Bootstrap Carousel

Simple Bootstrap Carousel

The carousel is a component that enables cycling through content(images, text, custom markup). You can include it using the Bootstrap carousel.js file or the whole bootstrap.js / bootstrap.min.js file.

Here’s the basic code for building this ‘Pug Carousel.’

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

<!-- Carousel Slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://goo.gl/6Xf9NY" alt="First pug wrapped in a blanket" style="width:100%;">
      </div>

<div class="item">
        <img src="https://goo.gl/tD3tz2" alt="Second pug wrapped in a blanket" style="width:100%;">
      </div>

<div class="item">
        <img src="https://goo.gl/K4NJsk" alt="Third pug wrapped in a blanket" style="width:100%;">
      </div>
    </div>
    </div>

Next, let’s see what the classes and attributes you can use with the carousel are.

Analyzing the Bootstrap Carousel classes

.carousel creates the carousel
.slide adds the transition effect. It is not mandatory.
.carousel-inner adds the slides
.item for the content of each slide
.left carousel-control & .right carousel-control add the left/right button to the carousel that enable the user to navigate between slides
.icon-next & .icon-prev for unicode arrow icons that point right/left
.carousel-caption inserts captions

Analyzing the data- Attributes

data-ride = “carousel“ activates the carousel
data-slide (that accepts the prev or next value)& data-slide-to (that accepts number values) specifies the slide to lead to

Examples of class & data- attribute usage

adding controls

<div class="container">
  <h2 style="color:tomato; text-align: center; padding: 5px;">The Pug Carousel</h2>
  <div id="pugCarousel" class="carousel slide" data-ride="carousel">

<!-- Carousel Slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://goo.gl/6Xf9NY" alt="First pug wrapped in a blanket" style="width:100%;">
      </div>

<div class="item">
        <img src="https://goo.gl/tD3tz2" alt="Second pug wrapped in a blanket" style="width:100%;">
      </div>

<div class="item">
        <img src="https://goo.gl/K4NJsk" alt="Third pug wrapped in a blanket" style="width:100%;">
      </div>
    </div>

<!-- Carousel Controls -->
    <a class="left carousel-control" href="#pugCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    </a>
    <a class="right carousel-control" href="#pugCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    </a>

</div>
</div>

addingindicators

Bootstrap Carousel with indicators adding

<div class="container">
  <h2 style="color:tomato; text-align: center; padding: 5px;">The Pug Carousel</h2>
  <div id="pugCarousel" class="carousel slide" data-ride="carousel">

<!-- Carousel Slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://goo.gl/6Xf9NY" alt="First pug wrapped in a blanket" style="width:100%;">
      </div>

<div class="item">
        <img src="https://goo.gl/tD3tz2" alt="Second pug wrapped in a blanket" style="width:100%;">
      </div>

<div class="item">
        <img src="https://goo.gl/K4NJsk" alt="Third pug wrapped in a blanket" style="width:100%;">
      </div>
    </div>

<!-- Carousel Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#pugCarousel" data-slide-to="0"></li>
      <li data-target="#pugCarousel" data-slide-to="1"></li>
      <li data-target="#pugCarousel" data-slide-to="2"></li>
    </ol>

</div>
</div>

captions

Bootstrap Carousel with captions

<div class="container">
  <h2 style="color:tomato; text-align: center; padding: 5px;">The Pug Carousel</h2>
  <div id="pugCarousel" class="carousel slide" data-ride="carousel">

<!-- Carousel Slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://goo.gl/6Xf9NY" alt="First pug wrapped in a blanket" style="width:100%;">
        <div class="carousel-caption">
          <p style="font-size:50px; text-shadow: 3px 3px 3px #000;">Pugs are one of the oldest dog breeds!</p>
        </div>
      </div>

<div class="item">
        <img src="https://goo.gl/tD3tz2" alt="Second pug wrapped in a blanket" style="width:100%;">
        <div class="carousel-caption">
          <p style="font-size:50px; text-shadow: 3px 3px 3px #000;">A group of pugs is called a grumble!</p>
        </div>
      </div>

<div class="item">
        <img src="https://goo.gl/K4NJsk" alt="Third pug wrapped in a blanket" style="width:100%;">
        <div class="carousel-caption">
          <p style="font-size:50px; text-shadow: 3px 3px 3px #000;">Pugs can sleep up to 14h a day!</p>
        </div>
      </div>
    </div>

</div>
</div>

Conclusions & further steps

Overall, building this kind of carousel should be easy enough for almost anybody. And it probably would not take more than half an hour to develop (unless you’re like me and spend 3 hours finding the perfect pug pictures).

There are still things you can learn about Bootstrap Carousels such as options and methods.

We’ll leave you with this short tutorial for now and if you find it useful enough, we’ll certainly take it a step further in another article. Just tell us in the comments!