Carousel programmatic control in Bootsrap - Mini Project: Build & Apply

Bootstrap Carousel Programmatic Control

📖 Scenario: You are building a simple image carousel for a travel website homepage. The carousel will show three beautiful travel photos. Instead of relying on the default controls, you want to add your own buttons to move the carousel forward and backward programmatically.

🎯 Goal: Create a Bootstrap carousel with three images and add two custom buttons below it. These buttons will control the carousel to move to the previous or next slide when clicked.

📋 What You'll Learn

Use Bootstrap 5 carousel component with exactly three slides

Add two buttons labeled 'Previous Slide' and 'Next Slide' below the carousel

Use JavaScript to programmatically control the carousel when these buttons are clicked

Ensure the carousel cycles through slides correctly when buttons are used

Use semantic HTML and accessible button labels

💡 Why This Matters

🌍 Real World

Custom carousel controls are common on websites to match branding or improve user experience beyond default controls.

💼 Career

Knowing how to programmatically control UI components like carousels is important for front-end developers building interactive web pages.

1

Create the Bootstrap carousel with three slides

Write the HTML code to create a Bootstrap carousel with the id travelCarousel. Add exactly three carousel-item elements inside the carousel, each containing an <img> tag with src attributes set to "img1.jpg", "img2.jpg", and "img3.jpg" respectively. The first carousel-item must have the class active. Include the necessary Bootstrap classes for the carousel to function.

Bootsrap

Hint

Remember to add the active class only to the first carousel-item. Use Bootstrap classes carousel, slide, and carousel-inner as shown in Bootstrap documentation.

2

Add two buttons to control the carousel

Below the carousel div, add two <button> elements with the classes btn btn-primary. The first button must have the id prevBtn and the text Previous Slide. The second button must have the id nextBtn and the text Next Slide. These buttons will be used to control the carousel programmatically.

Bootsrap

Hint

Use <button> tags with the Bootstrap classes btn btn-primary. Assign the exact ids prevBtn and nextBtn to the buttons.

3

Create JavaScript variables to select carousel and buttons

Write JavaScript code to select the carousel element with id travelCarousel and store it in a constant called carouselElement. Then create a Bootstrap Carousel instance called carousel using new bootstrap.Carousel(carouselElement). Also select the buttons with ids prevBtn and nextBtn and store them in constants prevButton and nextButton respectively.

Bootsrap

  
    
      
    
    
      
    
    
      
    
  


Previous Slide
Next Slide


// Your code here

Hint

Use document.getElementById to select elements by their ids. Create the Bootstrap carousel instance with new bootstrap.Carousel().

4

Add event listeners to buttons to control carousel slides

Add click event listeners to prevButton and nextButton. When prevButton is clicked, call carousel.prev() to move to the previous slide. When nextButton is clicked, call carousel.next() to move to the next slide.

Bootsrap

  
    
      
    
    
      
    
    
      
    
  


Previous Slide
Next Slide


const carouselElement = document.getElementById('travelCarousel');
const carousel = new bootstrap.Carousel(carouselElement);
const prevButton = document.getElementById('prevBtn');
const nextButton = document.getElementById('nextBtn');

// Add click event listeners to buttons
// Your code here

Hint

Use addEventListener on each button to listen for click events. Inside the event handler, call carousel.prev() or carousel.next() accordingly.

Practice

1. What does programmatic control of a Bootstrap carousel allow you to do?

easy

A. Move slides using JavaScript commands

B. Change the carousel's color scheme

C. Add new images to the carousel dynamically

D. Automatically resize the carousel on window resize

Solution

1. Step 1: Understand programmatic control meaning

   Programmatic control means controlling the carousel with code, not just user clicks.

2. Step 2: Identify what JavaScript commands do

   JavaScript commands let you move slides forward, backward, or jump to a specific slide.

3. Final Answer:

   Move slides using JavaScript commands -> Option A

4. Quick Check:

   Programmatic control = move slides with code [OK]

Hint: Programmatic means controlling with code, not style [OK]

Common Mistakes:

• Confusing programmatic control with styling changes
• Thinking it adds images automatically
• Assuming it resizes carousel automatically

2. Which JavaScript method correctly moves a Bootstrap carousel to the next slide?

easy

A. carousel.next()

B. document.carousel.nextSlide()

C. carousel.slideNext()

D. $('#carouselExample').carousel('next')

Solution

1. Step 1: Recall Bootstrap carousel JavaScript syntax

   Bootstrap uses jQuery style calls like $('#id').carousel('method').

2. Step 2: Identify correct method for next slide

   The method to go to next slide is 'next', so $('#carouselExample').carousel('next') is correct.

3. Final Answer:

   $('#carouselExample').carousel('next') -> Option D

4. Quick Check:

   Use $('#id').carousel('next') to move next [OK]

Hint: Bootstrap carousel uses $('#id').carousel('method') syntax [OK]

Common Mistakes:

• Using non-existent methods like carousel.next()
• Trying to call methods on document.carousel
• Using camelCase method names not in Bootstrap API

3. Given this code snippet, what slide will be shown after execution?

$('#myCarousel').carousel(2);

Assuming the carousel has 4 slides indexed 0 to 3.

medium

A. Slide 0

B. Slide 1

C. Slide 2

D. Slide 3

Solution

1. Step 1: Understand carousel method with number argument

   Calling carousel(n) moves the carousel to slide number n (zero-based index).

2. Step 2: Identify which slide index 2 refers to

   Index 2 means the third slide (0,1,2), so slide 2 will be shown.

3. Final Answer:

   Slide 2 -> Option C

4. Quick Check:

   carousel(2) shows slide index 2 [OK]

Hint: carousel(n) jumps to slide n (zero-based) [OK]

Common Mistakes:

• Thinking carousel(2) moves 2 slides forward
• Confusing slide numbers starting at 1
• Assuming carousel(2) triggers next slide

4. What is wrong with this code to pause a Bootstrap carousel?

document.getElementById('carouselExample').carousel('pause');

medium

A. The method name should be 'stop' instead of 'pause'

B. carousel method is not available on DOM element directly

C. Missing parentheses after 'carousel'

D. The ID selector should use '#' in getElementById

Solution

1. Step 1: Understand how Bootstrap carousel methods are called

   Bootstrap carousel methods are called on jQuery objects, not plain DOM elements.

2. Step 2: Identify why getElementById fails

   getElementById returns a DOM element without jQuery methods, so .carousel('pause') is undefined.

3. Final Answer:

   carousel method is not available on DOM element directly -> Option B

4. Quick Check:

   Use jQuery selector, not getElementById, for carousel methods [OK]

Hint: Use jQuery selector $('#id'), not getElementById, for carousel [OK]

Common Mistakes:

• Trying to call carousel on plain DOM element
• Using wrong method name 'stop' instead of 'pause'
• Adding '#' inside getElementById argument

5. You want to programmatically jump to the last slide of a Bootstrap carousel with 5 slides. Which code snippet correctly does this?

hard

A. $('#carouselExample').carousel(4);

B. $('#carouselExample').carousel('last');

C. $('#carouselExample').carousel('to', 5);

D. $('#carouselExample').carousel.slide(5);

Solution

1. Step 1: Determine last slide index for 5 slides

   Slides are zero-indexed, so last slide index is 4 (0 to 4).

2. Step 2: Use correct method to jump to slide by index

   Calling carousel(4) jumps to slide index 4. Other options use invalid methods or indexes.

3. Final Answer:

   $('#carouselExample').carousel(4); -> Option A

4. Quick Check:

   Use carousel(lastIndex) to jump to last slide [OK]

Hint: Last slide index = total slides - 1; use carousel(index) [OK]

Common Mistakes:

• Using 'last' as method which doesn't exist
• Passing slide number out of range (5 instead of 4)
• Using non-existent carousel.slide() method