在 Bootstrap 5 中，轮播（Carousel） 是一种用于展示多张图片或其他内容的组件，可以自动或手动切换不同的项目。

1. 基本轮播

最基本的轮播使用 .carousel 类，并通过 .carousel-item 来定义每个轮播项，.carousel-control-prev 和 .carousel-control-next 控制轮播的切换。

示例：基本轮播

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
  • .carousel：定义轮播容器。
  • .carousel-inner：包含所有轮播项。
  • .carousel-item：每个轮播项，使用 .active 类来指定显示的项。
  • .carousel-control-prev 和 .carousel-control-next：用于控制轮播的前后切换。

2. 自动播放和暂停

通过 data-bs-ride="carousel" 属性，轮播会自动开始播放。如果你希望控制轮播的自动播放时间间隔，可以通过 data-bs-interval 属性来设置。

示例：自动播放和时间间隔

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
  • data-bs-ride="carousel"：启用轮播自动播放。
  • data-bs-interval="2000"：设置轮播自动切换的时间间隔（单位为毫秒），在这里设置为每 2 秒切换。

3. 使用轮播的控件

你可以在轮播中添加 指示器（Indicators），让用户可以点击某个指示点直接跳转到指定的轮播项。

示例：带有指示器的轮播

<div id="carouselWithIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselWithIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselWithIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselWithIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselWithIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselWithIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
  • .carousel-indicators：指示器容器，包含多个 button 元素。
  • data-bs-slide-to="X"：指示器对应的轮播项的索引（从 0 开始）。

4. 轮播内嵌内容

除了图片，你还可以在轮播项中放置其他内容，比如文本、按钮等。

示例：带有文本和按钮的轮播

<div id="carouselExampleText" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
        <a href="#" class="btn btn-primary">Learn More</a>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
        <a href="#" class="btn btn-primary">Learn More</a>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
        <a href="#" class="btn btn-primary">Learn More</a>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleText" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleText" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
  • .carousel-caption：定义轮播项的文字内容。
  • d-none d-md-block：控制在不同的屏幕尺寸上，轮播文本的显示（仅在中等及以上屏幕显示）。

5. 控制轮播的 JavaScript 方法

Bootstrap 5 提供了多种 JavaScript 方法来控制轮播：

  • carousel.next()：跳转到下一个轮播项。
  • carousel.prev()：跳转到上一个轮播项。
  • carousel.to(index)：跳转到指定的轮播项，index 是项的索引。
  • carousel.pause()：暂停轮播。
  • carousel.cycle()：重新启动自动播放。

这些方法可以通过 JavaScript 来调用：

var myCarousel = new bootstrap.Carousel(document.getElementById('carouselExample'));
myCarousel.next();  // 下一项
myCarousel.prev();  // 上一项
myCarousel.to(2);   // 跳转到第三项

总结

  • .carousel：定义轮播容器。
  • .carousel-item：每一项的内容。
  • .carousel-control-prev 和 .carousel-control-next：前后切换按钮。
  • data-bs-ride="carousel"：启用自动播放。
  • data-bs-interval：设置切换时间间隔。
  • .carousel-indicators：轮播指示器。
  • .carousel-caption：轮播项中的文字内容。

通过这些类和属性，Bootstrap 5 的轮播组件可以帮助你实现图片、内容展示的自动切换和用户交互。