Bootstrap: Adding a Slideshow (Carousel)

Topics covered in this Mobile & Responsive Web Design tutorial:

Adding a slideshow using Bootstrap’s carousel, Hiding the slideshow on mobile

Exercise Preview

Exercise Overview

Bootstrap also comes with some handy a JavaScript library. In this exercise, you’ll see how easy it is to add a slideshow to the page using Bootstrap’s carousel.

1. If you completed the previous exercises, you can skip the following sidebar. We recommend you finish the previous exercises (5C–B1) before starting this one. If you haven’t finished them, do the following sidebar.

   If You Did Not Do the Previous Exercises (5C–B1)

   1. Close any files you may have open.
   2. On the Desktop, go to Class Files > yourname-Mobile and Responsive Class.
   3. Delete the Bootstrap folder.
   4. Select the Bootstrap Skinning Done folder.
   5. Rename the folder to Bootstrap.

Getting Started

1. For this exercise we’ll be working with the Bootstrap folder. Open that folder in your code editor if it allows you to (like Sublime Text does).

2. If index.html is not already open in your code editor, open it now.

3. Scroll to the bottom of the code and notice that we have already included links to some necessary JavaScript (.js) files:

   • jQuery: A link to Google CDN (content delivery network) with a fallback to the local version if that doesn’t load.

   • Bootstrap’s JS: This is provided by Bootstrap and required for their JS components. These files require jQuery.

Adding Markup for the Slideshow

We have to replace our placeholder image with some markup for the slideshow.

1. We’ve included a file with a basic example we got from the Bootstrap website. We’ll use this code to start with. In your code editor, open carousel-code.html from the snippets folder.

2. Select all the code.

3. Copy it.

4. Close the file.

5. You should be back in index.html. Around line 41 select the slideshow placeholder image shown below:

   <div class="col-sm-8 col-lg-9">
      <img src="img/slideshow-low-lustre.jpg" class="hidden-xs">
      <hr class="hidden-xs">
   

6. Paste the code to replace the placeholder, so you end up with the following:

   <div class="col-sm-8 col-lg-9">
      <div id="carousel-example-generic" class="carousel slide">
         <!-- Indicators -->
         <ol class="carousel-indicators">
   

   Code Omitted To Save Space

         </a>
      </div>
      <hr class="hidden-xs">
   

7. Currently there is no content in the slideshow. The provided code has one example slide where we can simply fill in the missing pieces. Starting around line 52 add the following bold code:

   <div class="carousel-inner">
      <div class="item active">
         <img src="img/slideshow-low-lustre.jpg" alt="Low Lustre">
         <div class="carousel-caption">
            <h3>Low Lustre</h3> 
            <p>Thursday, June 5: 10 PM</p>
         </div>
      </div>
   </div>
   

8. We need a couple more slides, so copy the item div shown in bold below:

   <div class="carousel-inner">
      <div class="item active">
         <img src="img/slideshow-low-lustre.jpg" alt="Low Lustre">
         <div class="carousel-caption">
            <h3>Low Lustre</h3>
            <p>Thursday, June 5: 10 PM</p>
         </div>
      </div>
   </div>
   

9. Paste two copies below the first item as shown below:

   <div class="carousel-inner">
      <div class="item active">
   

   Code Omitted To Save Space

      </div>
      <div class="item active">
   

   Code Omitted To Save Space

      </div>
      <div class="item active">
   

   Code Omitted To Save Space

      </div>
   </div>
   

10. We only want the active class to be on the first item. Delete the active class from the second and third items.

11. Fill in the proper information for the two new items as shown below (and double-check that you properly removed the active class from the second and third items):

    <div class="carousel-inner">
       <div class="item active">
    

    Code Omitted To Save Space

       </div>
       <div class="item">
          <img src="img/slideshow-juliette.jpg" alt="Juliette">
          <div class="carousel-caption">
             <h3>Juliette</h3> 
             <p>Friday, June 6: 10 PM</p>
          </div>
       </div>
       <div class="item">
          <img src="img/slideshow-plastic-brain.jpg" alt="Plastic Brain">
          <div class="carousel-caption">
             <h3>Plastic Brain</h3> 
             <p>Saturday, June 7: 10 PM</p>
          </div>
       </div>
    </div>
    

12. Save and preview index.html in a browser. You should only see the first slideshow photo and caption, but you can click on the right or left sides of the slide to go to the previous/next item!

    After we manually advance to the next slide, the slideshow starts and will automatically advance every few seconds. To work properly though, the slideshow should automatically advance after the page loads, without requiring us to interact with it. To get that working we need to add a little JavaScript code we got from Bootstrap’s website.

13. Switch back to your code editor.

14. Open carousel-script.js from the snippets folder. This is some sample code we got from the Bootstrap website.

    • $(document).ready(function() tells jQuery to do something as soon as the document is ready (when the page objects are loaded).

    • $('.carousel').carousel() enables the slideshow. It finds a div with the carousel class (which was the class used in Bootstrap’s sample code) and starts the carousel JavaScript function on it.

15. Do a File > Save As.
16. Save the file as main.js into the js folder.
17. Return to index.html in your code editor, and scroll down to the bottom where we have already linked to jQuery and the Bootstrap JS.

18. Below the Bootstrap JS file, link to the main.js as shown below in bold:

    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
    

19. Save the file.

20. Preview index.html in a browser. Wait a few seconds for the slide to change, and you should see that the slideshow is working automatically. Groovy!

Hiding the Slideshow on Mobile

Previously we hid the slideshow’s placeholder image on mobile. Let’s hide the slideshow on mobile the same way.

1. Switch to index.html in your code editor.

2. Around line 41 add the following class to the carousel.

   <div id="carousel-example-generic" class="carousel slide hidden-xs">
   

3. Save and preview index.html in a browser. The slideshow should no longer be visible on mobile devices.

   NOTE: Even though the slideshow is hidden, the images are still being loaded. If you did not want the images to load you’d have to switch to div tags with CSS background images instead of using the img tags in Bootstrap’s provided example.