在 Bootstrap 4 中，轮播（Carousel） 是一个用于展示一系列图片或内容的组件，通常用于实现图片幻灯片效果。Bootstrap 提供了一个响应式的轮播组件，支持自动切换、手动切换、过渡动画等功能。

1. 基本的轮播

一个简单的轮播组件包含多个项目，每个项目（carousel-item）可以是图片、文本或其他 HTML 元素。以下是基本的轮播结构：

示例：

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

解释：

  • carousel：为容器设置轮播样式。
  • carousel-inner：包裹轮播项的容器，所有轮播项都应该放在这个容器内。
  • carousel-item：每一个轮播项，可以是一个图片或其他 HTML 元素。
  • active：使第一个轮播项默认显示。
  • carousel-control-prev 和 carousel-control-next：定义轮播的前进和后退按钮。
    • data-slide="prev" 和 data-slide="next" 用于控制轮播的方向。

2. 自动播放与暂停

轮播组件默认会自动播放，但你也可以通过修改 data-ride 属性来控制是否自动播放。如果你不希望轮播自动播放，可以移除 data-ride="carousel" 属性。

示例：自动播放

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <!-- 轮播内容 -->
</div>

示例：不自动播放

<div id="carouselExample" class="carousel slide">
  <!-- 轮播内容 -->
</div>

3. 控制轮播速度与延迟

通过 data-interval 属性，你可以控制每个轮播项的切换时间（以毫秒为单位）。默认是 5000 毫秒（5 秒）。

示例：修改轮播切换时间为 3 秒

<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="3000">
  <!-- 轮播内容 -->
</div>

4. 使用 JavaScript 控制轮播

除了 HTML 属性，你还可以使用 JavaScript 来控制轮播组件，比如手动触发前进、后退等操作。

示例：使用 JavaScript 手动控制轮播

<!-- 轮播结构 -->
<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <!-- 轮播内容 -->
</div>

<!-- 控制按钮 -->
<button onclick="$('#carouselExample').carousel('prev')">Previous</button>
<button onclick="$('#carouselExample').carousel('next')">Next</button>

5. 轮播中的文本和内容

你不仅可以在轮播中展示图片，还可以展示文本或其他 HTML 元素，创建更丰富的内容。

示例：轮播包含文本内容

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="carousel-caption d-none d-md-block">
        <h5>First Slide</h5>
        <p>This is the first slide with some description.</p>
      </div>
      <img src="image1.jpg" class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second Slide</h5>
        <p>This is the second slide with some description.</p>
      </div>
      <img src="image2.jpg" class="d-block w-100" alt="Second slide">
    </div>
  </div>
  <!-- 控制按钮 -->
</div>

解释：

  • carousel-caption：用于显示轮播项的标题和描述。
  • d-none d-md-block：在大屏幕设备上显示文本描述，屏蔽小屏幕设备上的显示。

6. 轮播的动态控制

你可以通过 JavaScript 动态控制轮播的状态，比如暂停、继续播放等操作。

示例：动态控制轮播

<button onclick="$('#carouselExample').carousel('pause')">Pause</button>
<button onclick="$('#carouselExample').carousel('cycle')">Resume</button>

解释：

  • pause：暂停轮播。
  • cycle：恢复自动播放。

7. 响应式设计

Bootstrap 4 的轮播组件默认是响应式的，意思是它会根据屏幕大小自动调整显示效果。在手机屏幕上，轮播会自动适应为垂直显示；在桌面屏幕上，则水平展示。

示例：响应式轮播

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="Second slide">
    </div>
  </div>
  <!-- 控制按钮 -->
</div>

轮播中的图像（或其他内容）会自动适应容器的宽度，确保它在不同设备上都能良好显示。

总结

  • carousel：基础轮播容器。
  • carousel-inner：包裹所有轮播项的容器。
  • carousel-item：单个轮播项。
  • active：确保某个轮播项默认显示。
  • carousel-control-prev 和 carousel-control-next：前进和后退按钮。
  • data-ride="carousel"：启用自动播放。
  • data-interval="5000"：设置轮播切换的时间间隔。

通过这些设置，你可以轻松创建一个响应式、可定制的轮播组件，满足各种需求。