Marking up the carousel

Let's get started with our carousel, which will rotate between four featured images from our portfolio.

Bootstrap's carousel markup structure can be found in its documentation pages at the following URL:

http://getbootstrap.com/javascript/#carousel

Following the pattern used in the example, we'll begin with this structure to set up the fundamental element. This will contain all parts of the carousel, followed by the progress indicators:

<div id="homepage-feature" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
    <li data-target="#homepage-feature" data-slide-to="1"></li>
    <li data-target="#homepage-feature" data-slide-to="2"></li>
    <li data-target="#homepage-feature" data-slide-to="3"></li>
  </ol>

Note that I've used a div tag with an ID (id="homepage-feature") to establish the fundamental context of carousel. The carousel class applies the Bootstrap's carousel CSS to the carousel elements, adding appropriate styles to the carousel indicators, the carousel items, and the next and previous controls.

The homepage-feature ID must be used in the data-target attributes of the progress indicators. This signals the JavaScript plugin to update the indicator for the active carousel item with the active class. We've provided that class for the first indicator to get things started. From there, the JavaScript takes over. It removes the class, and adds it to the appropriate indicator as the carousel cycles.

Also, note that the data-slide-to values begin counting from 0. This is the standard behavior for JavaScript and other programming languages. Just remember: start counting at zero, not one.

After the indicators, the element of the class carousel-inner follows. This serves as the wrapper to contain all of the carousel items—in this case, our images.

The carousel items come within carousel-inner. They are a group of div tags, each with class="item". Modify the first item to have both the classes item and active, to make it visible from the outset.

Thus, the markup structure works as follows:

<!-- Wrapper for slides -->
<div class="carousel-inner">
  <div class="item active">
    <img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage">
  </div>
  <div class="item">
    <img src="img/okwu.jpg" alt="OKWU.edu Homepage">
  </div>
  <div class="item">
    <img src="img/bso.jpg" alt="Bartlesville Symphony Homepage">
  </div>
  <div class="item">
    <img src="img/alittlecode.jpg" alt="aLittleCode.com Homepage">
  </div>
</div><!-- /.carousel-inner -->

After the carousel items, we need to add the carousel-controls. These will provide the next and previous buttons at the left and right edges of the carousel. You'll see that these have classes that correspond to icons from the included Glyphicon font icons. After the controls, we'll close up our entire markup structure with the closing div tag.

<!-- Controls -->
  <a class="left carousel-control" href="#homepage-feature" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#homepage-feature" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div><!-- /#homepage-feature.carousel -->

Note

The carousel-controls need to have the ID of the fundamental carousel element (#homepage-feature) for their href value.

Once this code is in place, save your work and refresh your browser. Bootstrap's styles and JavaScript should start working. Your images should now work as a sliding carousel!

By default, the carousel will slide every 5 seconds. Let's set the interval to 8 seconds, to give our users time to appreciate the full beauty of our work:

  1. Open js/main.js.
  2. Add the following lines. We'll begin with the jQuery method of checking to ensure page elements are ready, and then initialize the carousel with an interval of 8000 milliseconds.
    $( document ).ready(function() {
  $('.carousel').carousel({
    interval: 8000
  });
});
  3. Save and refresh. You will see that the interval has increased to 8 seconds.

For this and other options, see the Bootstrap carousel documentation at http://getbootstrap.com/javascript/#carousel.

We'll return to customize the styling of the carousel, its indicators, and its icons later in the chapter. First, let's continue leveraging the power of Bootstrap's default styles and set up a responsive grid for the content below the carousel.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset