1. Introduction to Bootstrap Carousel

A Carousel in Bootstrap allows you to display multiple images or content as a slideshow.

👉 How to Use Bootstrap Carousel?

• Use the <div class="carousel"> structure.

• Add .carousel-inner to contain slide items.

• Use .carousel-item for individual slides.

• Add controls and indicators for navigation.

2. Basic Carousel Example

Example: Simple Image Carousel

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/600x300" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/600x300" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/600x300" class="d-block w-100" alt="Slide 3">
    </div>
  </div>
</div>

✅ Explanation:

• carousel slide → Creates a carousel container.

• .carousel-inner → Wraps all slides.

• .carousel-item → Defines each slide.

• .active → Marks the first slide as the default

3. Adding Navigation Controls

You can navigate slides using left and right buttons.

Example: Carousel with Controls

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/600x300" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/600x300" class="d-block w-100" alt="Slide 2">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

✅ Explanation:

• carousel-control-prev → Button for previous slide.

• carousel-control-next → Button for next slide.

• data-bs-slide="prev" & data-bs-slide="next" → Define slide directions.

4. Adding Indicators (Dots for Navigation)

Indicators (dots) allow users to jump to a specific slide.

Example: Carousel with Indicators

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/600x300" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/600x300" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/600x300" class="d-block w-100" alt="Slide 3">
    </div>
  </div>
</div>

✅ Explanation:

• carousel-indicators → Creates navigation dots.

• data-bs-slide-to="0" → Moves to specific slides.

• .active → Highlights the current slide.

5. Adding Captions to Slides

Captions provide titles and descriptions on slides.

Example: Carousel with Captions

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/600x300" class="d-block w-100" alt="Slide 1">
      <div class="carousel-caption d-none d-md-block">
        <h5>Slide Title</h5>
        <p>Slide Description</p>
      </div>
    </div>
  </div>
</div>

6. Controlling Carousel Speed

By default, the carousel automatically slides. You can control the speed using data-bs-interval.

Example: Slow-Speed Carousel

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="5000">
      <img src="https://via.placeholder.com/600x300" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item" data-bs-interval="3000">
      <img src="https://via.placeholder.com/600x300" class="d-block w-100" alt="Slide 2">
    </div>
  </div>
</div>

✅ Explanation:

• data-bs-interval="5000" → First slide stays for 5 seconds.

• data-bs-interval="3000" → Second slide stays for 3 seconds.

7. Stopping Auto-Sliding

You can disable auto-sliding using data-bs-ride="false".

Example: Manual Carousel

<div id="carouselExamplePause" class="carousel slide" data-bs-ride="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/600x300" class="d-block w-100" alt="Slide 1">
    </div>
  </div>
</div>

8. Full-Width Background Carousel

A full-width carousel spans the entire screen width.

Example: Full-Screen Carousel

<div id="carouselFullScreen" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/1920x600" class="d-block w-100" alt="Full Screen Slide">
    </div>
  </div>
</div>

Conclusion

Bootstrap Carousels & Sliders provide dynamic, interactive content with minimal coding.

• Basic Carousel: Use .carousel, .carousel-inner, and .carousel-item.

• Navigation: Add controls & indicators.

• Captions: Use .carousel-caption for text overlays.

• Customization: Adjust speed, auto-play, and full-screen effects.

💡 Now you can build interactive carousels with Bootstrap! 🚀