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's JavaScript component library remains one of the most powerful tools for rapid web development in 2026. In this exercise, you'll discover just how effortless it is to implement a professional-grade slideshow using Bootstrap's carousel component. This approach not only saves development time but ensures cross-browser compatibility and responsive behavior out of the box—critical factors for modern web applications.

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, as they establish the foundational structure we'll be building upon. If you haven't finished them, follow the setup instructions in the sidebar below.

   Carousel Implementation Process

   1

   Setup Dependencies

   Link jQuery and Bootstrap JavaScript files to enable carousel functionality

   2

   Add Markup Structure

   Replace placeholder images with Bootstrap carousel HTML structure and components

   3

   Configure Auto-advance

   Implement JavaScript to enable automatic slideshow progression without user interaction

   4

   Mobile Optimization

   Apply responsive classes to hide carousel on mobile devices for better user experience

Getting Started

Before we dive into carousel implementation, let's ensure your development environment is properly configured. Bootstrap's JavaScript components depend on both jQuery and Bootstrap's own JS library, so we'll verify these dependencies are in place.

1. For this exercise we'll be working with the Bootstrap folder. Open that folder in your code editor if it supports folder-based project navigation (most modern editors like VS Code, Sublime Text, or Atom do).

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 the essential JavaScript (.js) files required for Bootstrap's interactive components:

   • jQuery: We're using Google's CDN (content delivery network) for faster loading, with a fallback to the local version if the CDN is unavailable. This redundancy ensures your site remains functional even if external services experience downtime.

   • Bootstrap's JS: This library contains all of Bootstrap's interactive components, including carousels, modals, and dropdowns. Note that these components have a hard dependency on jQuery, which is why jQuery must be loaded first.

Adding Markup for the Slideshow

Now we'll replace the static placeholder image with dynamic carousel markup. Bootstrap provides excellent starter templates that we can customize for our specific needs.

1. We've included a file with Bootstrap's recommended carousel structure, which we obtained directly from their official documentation. This ensures we're following current best practices. 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 carousel code to replace the placeholder. This gives you a complete carousel structure with indicators, slides, and navigation controls:

   <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 the carousel structure is empty—we need to populate it with actual content. The template includes one example slide that we'll customize. Starting around line 52, add the following bold code to create your first slide:

   <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. A single slide doesn't demonstrate the carousel's power—we need additional slides to create a compelling user experience. Copy the complete 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 additional copies below the first item to create a three-slide carousel:

   <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. Critical step: Only one slide should have the active class, which determines which slide displays initially. Remove the active class from the second and third items to prevent conflicts.

11. Now customize each slide with unique content. Update the second and third items with the information shown below, and verify that only the first item retains the active class:

    <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 see the first slideshow photo and caption. The navigation arrows on the left and right sides allow manual advancement through the slides.

    You'll notice that after manually advancing to the next slide, the carousel begins automatic rotation every few seconds. However, professional implementations should start this automatic behavior immediately upon page load, without requiring user interaction. Let's add the JavaScript initialization code to achieve this polished behavior.

13. Switch back to your code editor.

14. Open carousel-script.js from the snippets folder. This contains Bootstrap's recommended initialization code:

    • $(document).ready(function() is jQuery's DOM ready event, which ensures our code executes only after all page elements are fully loaded. This prevents JavaScript errors that can occur when scripts try to manipulate elements that don't yet exist.

    • $('.carousel').carousel() activates the carousel functionality on any element with the carousel class. This method initializes the component with Bootstrap's default settings, including automatic advancement.

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 where we've linked the jQuery and Bootstrap JS libraries.

18. Below the Bootstrap JS file, add a link to main.js as shown below in bold. Note the order: jQuery first, then Bootstrap JS, then our custom scripts:

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

19. Save the file.

20. Preview index.html in a browser. Within a few seconds, you should observe the automatic slide transitions—this is exactly the professional behavior your users expect from modern web applications.

Hiding the Slideshow on Mobile

Mobile optimization requires strategic content prioritization. Since carousels can be challenging to navigate on touch devices and may not provide the same visual impact on smaller screens, we'll hide the slideshow on mobile while maintaining the enhanced experience for larger displays.

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

2. Around line 41, add Bootstrap's responsive utility class to the carousel element:

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

3. Save and preview index.html in a browser. Test the responsive behavior by resizing your browser window or using your browser's device emulation tools. The slideshow should disappear on mobile-sized viewports.

   Important consideration: While the slideshow is visually hidden on mobile, the images are still downloaded by the browser. In production environments where bandwidth optimization is critical, you might implement a more sophisticated solution using CSS background images with media queries or JavaScript-based conditional loading to prevent unnecessary resource consumption on mobile devices.