Activity 12: Bootstrap Carousel - Discovery Challenge

Create interactive image slideshows with Bootstrap's carousel component.

🎯 Learning Objectives

By completing this activity, you will:

• ✅ Understand Bootstrap carousel structure and components
• ✅ Add carousel indicators for navigation
• ✅ Configure auto-sliding and manual controls
• ✅ Integrate carousels with responsive layouts

Time: 30-35 minutes | Difficulty: Medium

🚀 Getting Started (See Results in 30 Seconds!)

Open index.html in your browser to see:

• Working carousel with 2 pet slides (auto-plays every 5 seconds)
• Navigation controls (prev/next arrows)
• Indicator dots at the bottom
• Captions describing each pet

Try this now:

1. Open index.html in your browser
2. Watch the carousel auto-advance between slides
3. Click the left/right arrows to navigate manually
4. Click the indicator dots to jump to specific slides

🎯 What's Already Working (65%)

✅ Bootstrap Setup: All CSS and JS dependencies loaded ✅ Navbar: Fully functional navigation bar with Pet Care branding ✅ Page Headers: Title and subtitle styled with Bootstrap classes ✅ Carousel Structure: Complete carousel with 2 working slides ✅ Slide 1: Golden Retriever with caption ✅ Slide 2: Persian Cat with caption ✅ Carousel Controls: Previous/next arrows functional ✅ Carousel Indicators: Dots for slide 1 and 2 ✅ Auto-play: Carousel advances automatically every 5 seconds ✅ Instructions Section: Alert box explaining carousel functionality

📋 Your Tasks (35%)

TODO 1: Add Third Carousel Slide (Medium)

Location: Inside <div class="carousel-inner"> (after Slide 2)

Success Criteria:

• Create a new <div class="carousel-item"> (NOT active class)
• Add a placeholder image with a different color scheme
• Include a carousel-caption with pet name/breed and description
• Image should be responsive (d-block w-100)

Hints:

• Copy the structure of Slide 2
• Use a different color in placeholder URL: /95E1D3/ffffff?text=Your+Pet
• Example pets: "Buddy - Beagle", "Whiskers - Tabby Cat", "Charlie - Parrot"
• Remember: Only the FIRST slide needs active class

Expected Result: When you click "next" twice, you should see your new third slide appear.

TODO 2: Add Indicator for Third Slide (Easy)

Location: Inside <ol class="carousel-indicators"> (after indicator for slide 1)

Success Criteria:

• Add <li data-target="#petCarousel" data-slide-to="2"></li>
• No active class (only first indicator is active)
• Must match the carousel ID exactly (#petCarousel)

Hints:

• Copy the structure of the second indicator
• Slide numbering starts at 0: Slide 1 = 0, Slide 2 = 1, Slide 3 = 2
• Test by clicking the third indicator dot

Expected Result: You should see 3 indicator dots. Clicking the third dot jumps to your new slide.

🔍 How Bootstrap Carousels Work

Key Components:

1. Carousel Container: <div class="carousel slide" data-ride="carousel">
2. Indicators: <ol class="carousel-indicators"> - Dot navigation
3. Carousel Inner: Contains all slides
4. Carousel Items: Individual slides (first one has active class)
5. Controls: Prev/next buttons linked to carousel ID

Important Classes:

• carousel slide - Main carousel wrapper
• carousel-item - Individual slide container
• carousel-item active - First/currently visible slide
• carousel-caption - Text overlay on slides
• d-none d-md-block - Hide captions on small screens

Auto-play Control:

• data-ride="carousel" - Enables auto-play
• Default interval: 5 seconds per slide
• Pauses on hover (built-in Bootstrap behavior)

🚀 Extension Challenges

Once you've completed the required tasks, try these:

1. Custom Timing: Add data-interval="3000" to carousel to change slide speed (3 seconds)
2. Disable Auto-play: Remove data-ride="carousel" and navigate manually only
3. More Slides: Add 2-3 more pet slides with unique descriptions
4. Styled Captions: Add custom CSS to style the carousel-caption (background color, padding)
5. Fade Transition: Replace carousel slide with carousel fade for different animation

📚 Bootstrap Resources

• Bootstrap 4.6 Carousel Docs
• data-ride="carousel" - Auto-play attribute
• data-interval="X" - Milliseconds between slides
• carousel-control-prev/next - Navigation arrows

✅ Testing Checklist

Before submitting, verify:

• Carousel displays 3 slides total
• All 3 indicator dots are visible
• Clicking indicators jumps to correct slide
• Prev/next arrows work for all slides
• Carousel auto-plays through all 3 slides
• Captions display correctly on each slide
• No console errors in browser DevTools

---

Activity 12 | W1 Front-end Design & User Experience | 30-35 min