Bootstrap provides us with a nice plugin to slideshow components through cycling elements, although it's pretty verbose and a little complicated to understand at first sight.

First of all, we need to create an element inside our div#main:

<div id="main" class="col-sm-offset-3 col-sm-9">
  <div id="carousel-notification" class="carousel" data-ride="carousel">
      …
  </div>
</div>

We must identify this element for the Bootstrap Carousel plugin, so we have called it #carousel-notification at our outmost div of the plugin.

Bootstrap will start a carousel via the data attributes for elements marked with data-ride="carousel", just like our element. In addition, this element must have the .carousel class for the CSS style.

We must create the elements inside the slides for the carousel, so we use the following markup to create the notification slides:

<div id="main" class="col-sm-offset-3 col-sm-9">
  <div id="carousel-notification" class="carousel" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="imgs/doge.jpg" width="512">
        <div class="carousel-caption">
          <p>What are you doing? So scare. It's alright now.</p>
        </div>
      </div>
      <div class="item">
        <img src="imgs/cat.jpg" width="512">
        <div class="carousel-caption">
          <p>I will never forgive you...</p>
        </div>
      </div>
      <div class="item">
        <img src="imgs/laika.jpg" width="512">
        <div class="carousel-caption">
          <p>Hey! How are you?</p>
        </div>
      </div>
    </div>
  </div>
</div>

Note that we have created three items. Each item has been created inside the .carousel-inner element. Inside this element, the items have been created with the .item class.

Inside each .item, there is an image followed by another element with the .carousel-caption class, which contains text to be displayed as captions for each slide. Note that the first slide also contains the .active class, which must necessarily be added to one (and only one) of the slides.

At this point, refresh Bootstrap carousel your browser and you should see the page like what is shown in this screenshot:

If you wait 5 seconds, you will see the image and caption change. You can set this interval value by the data-interval data attribute or through JavaScript, as an initializer parameter, as shown in this example:

$('.carousel').carousel({
  interval: 1000 // value in milliseconds
})

Also observe that there is no animation between the changes of the slides. To add it, put the .slide class into the .carousel element and you will see a left slide of the images.

<div class="item">
  <img src="imgs/laika.jpg" width="512">
  <div class="carousel-caption">
    <h3>Laika said:</h3>
    <p>Hey! How are you?</p>
  </div>
</div>

Creating slide indicators

The Bootstrap carousel also offers the ability to create bullet slide indicators. To do this, add the following code after the .carousel-inner element:

<div id="carousel-notification" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    …
  </div>

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

We just created an ordered list, <ol>. On each item, we have to say which is the carousel element identifier through data-target (in this case, it is #carousel-notification) and which slide each bullet will correspond to through data-slide-to. To do this, we just create the number of list items from the same size of the image items and enumerate them.

Refresh the browser, and now you should see the carousel with the bullets and all the modifications (the slide transition, the heading on the image item, and the bullet identifier), like this:

Adding navigation controls

Another cool option in the Bootstrap carousel is creating side navigation controls to change slides from left to right.

We add the markup for this after the indicator's one, as shown in the following HTML code:

<div id="carousel-notification" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    …
  </div>

  <!-- Indicators -->
  <ol class="carousel-indicators">
  </ol>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-notification" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-notification" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

As you can see, we created two carousel controls, one to the right and one to the left. Each of them must be inside an <a> tag identified by the .carousel-control class and the class for the action, which is .right or .left.

The href of the element represents the identifier of the carousel, just as data-target in the bullet indicators. The data-slide indicates the action that should be performed by the control, which can be next to move to the next slide or prev to move to the previous slide.

The next screenshot presents the final expected result of the carousel:

Tip

Using multiple Bootstrap carousels on the same page

If you plan to use multiple Bootstrap carousels on the same page, remember to correctly apply a unique id to the parent element (the one with the .carousel class). Also remember to update the target for the bullet indicator and slide controls.

$('.carousel').carousel(2); // which 2 is the slide enumerated as 2 in the data-slide-to

$('.carousel').carousel('next') // or 'prev'

You will now learn another Bootstrap plugin—Bootstrap Scrollspy. Scrollspy is a plugin used to automatically update any kind of Bootstrap navigation based on the scroll position. Many sites use it, including the Bootstrap documentation, in the side navigation. There, when you scroll the page, the active elements in the navigation bar change.

To exemplify the utilization of the plugin, let's create a .card on our audience.html page:

<div class="card">
  <div class="card-block">

  </div>
</div>

Inside .card-block, we will create two columns, the left one for the spy navigation and one to the right for the content itself. Remember to always place your .col-*-* inside a .row element:

<div class="card">
  <div class="card-block">
    <div class="row">
      <div class="col-sm-3" id="content-spy"></div>
      <div id="content" class="col-sm-9"></div>
    </div>
  </div>
</div>

We are identifying the navigation column as #content-spy and the content column as just #content.

First, let's create the left navigation using the .nav-pills.nav-stacked Bootstrap component. Do you remember it? Let's refresh your memory by using it again, as follows:

<div class="card">
  <div class="card-block">
    <div class="row">
      <div class="col-sm-3" id="content-spy">
        <ul class="nav nav-pills nav-stacked">
          <li role="presentation" class="active">
            <a href="#lorem">The Lorem</a>
          </li>
          <li role="presentation">
            <a href="#eros">The Eros</a>
          </li>
          <li role="presentation">
            <a href="#vestibulum">The Vestibulum</a>
          </li>
        </ul>
      </div>
      <div id="content" class="col-sm-9"></div>
    </div>
  </div>
</div>

All we need to do is create a <ul> with the .nav, .nav-pills, and .nav-stacked classes. Then we create three item lists, each one with a link inside, referencing an ID in the HTML (#lorem, #eros, and #vestibulum). We will use these IDs later to refer to the Scrollspy.

Now create the content. It must be in the #content three <div>, each one with the ID corresponding to the references in the href of the link in the item list, as shown in this code:

<div class="card">
  <div class="card-block">
    <div class="row">
      <div class="col-sm-3" id="content-spy">
        <ul class="nav nav-pills nav-stacked">
          <li role="presentation" class="active">
            <a href="#lorem">The Lorem</a>
          </li>
          <li role="presentation">
            <a href="#eros">The Eros</a>
          </li>
          <li role="presentation">
            <a href="#vestibulum">The Vestibulum</a>
          </li>
        </ul>
      </div>
      <div id="content" class="col-sm-9">
        <div id="lorem">
          <h2>The Lorem</h2>
          <p>
            Lorem ipsum dolor sit amet… <!-- Rest of the text -->
          </p>
        </div>
        <div id="eros">
          <h2>The Eros</h2>
          <p>
            Curabitur eget pharetra risus… <!-- Rest of the text -->
          </p>
        </div>
        <div id="vestibulum">
          <h2>The Vestibulum</h2>
          <p>
            Integer eleifend consectetur… <!-- Rest of the text -->
            <img src="imgs/jon.png" class="img-responsive">
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Note the identifiers on each <div> corresponding to the href in the link of the item list. This is used to correlate the scroll with the active item in the nav element.

To activate the plugin, we have two options. Activate it by data attributes or by JavaScript. If you choose JavaScript, place the call function in main.js:

$('#content').scrollspy({
  target: '#content-spy'
})

Refresh the page and see it working. If you want to use data attributes, place a data-spy and a data-target in the #content element:

<div class="card">
  <div class="card-block">
    <div class="row">
      <div class="col-sm-3" id="content-spy">
        <ul class="nav nav-pills nav-stacked">
          <li role="presentation" class="active">
          <a href="#lorem">The Lorem</a>
          </li>
          <li role="presentation">
            <a href="#eros">The Eros</a>
          </li>
          <li role="presentation">
            <a href="#vestibulum">The Vestibulum</a>
          </li>
        </ul>
      </div>
      <div id="content" class="col-sm-9" data-spy="scroll" data-target="#content-spy">
        <div id="lorem">
          <h2>The Lorem</h2>
          <p>
            Lorem ipsum dolor sit amet… <!-- Rest of the text -->
          </p>
        </div>
        <div id="eros">
          <h2>The Eros</h2>
          <p>
            Curabitur eget pharetra risus… <!-- Rest of the text -->
          </p>
        </div>
        <div id="vestibulum">
          <h2>The Vestibulum</h2>
          <p>
            Integer eleifend consectetur… <!-- Rest of the text -->
            <img src="imgs/jon.png" class="img-responsive">
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

The data-spy must have the scroll value in order to identify that the spy must be active for the scrolling action. The data-target works just like the parameter target passed in the activation by JavaScript. It should represent the element that will spy on the element, #content-spy in this case.

To make a final effect for the scrolling, create the following CSS to limit the height and adjust the scroll of the content:

#content {
  height: 30em;
  overflow: auto;
}

Refresh your web browser and the card should appear like what is shown in the next screenshot. Note that here we have scrolled the content to the second item.

Great! Now you have learned another Bootstrap plugin! The Scrollspy plugin is very useful, especially on pages with extensive content, subdivided into sections. Make great use of it.