Skip to content
W3S101

Bootstrap 轮播

Bootstrap Carousel 插件

Section titled “Bootstrap Carousel 插件”
Section titled “Carousel 插件”

Carousel 插件是一个幻灯片组件，用于循环显示一系列内容，使用 CSS 3D 变换和 JavaScript 构建。它可以用于图像、文本或自定义标记。

提示：Bootstrap 的 JavaScript 组件（包括 Carousel）可以单独包含（例如，carousel.js），也可以通过使用 bootstrap.bundle.min.js 一次性包含所有组件（其中包括用于下拉菜单、弹出框和工具提示的 Popper，但也适用于轮播）。
Section titled “Carousel 示例”

下面是一个带有指示器、控件和说明文字的轮播示例。（注意：图片本身仅用于说明幻灯片可能包含的内容）。

注意：轮播依赖于 CSS 过渡和动画。虽然在现代浏览器中得到广泛支持，但非常旧的浏览器可能无法完美显示滑动效果。
Section titled “如何创建 Carousel”

以下示例展示了带有指示器、控件和项目的基本轮播的 HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carousel Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>


<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <!-- Indicators -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>


  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img_chania.jpg" class="d-block w-100" alt="Chania - First slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="img_chania2.jpg" class="d-block w-100" alt="Chania - Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="img_flower.jpg" class="d-block w-100" alt="Flower - Third slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>


  <!-- Left and right controls -->
  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

示例解释

Section titled “示例解释”

最外层的 <div>（#myCarousel）：

  • 需要一个 id（例如 myCarousel）以便指示器和控件可以定位。
  • .carousel 类指定它是一个轮播。
  • .slide 类添加 CSS 过渡以实现滑动效果。如果您想要即时过渡（虽然不常见），可以省略它。
  • data-bs-ride="carousel" 属性使轮播在页面加载时开始动画。如果您想手动或根据事件初始化它，请设置为 data-bs-ride="false"。

指示器（.carousel-indicators）：

  • 这些是小的可点击圆点，通常位于底部。在 Bootstrap 5 中，它们是 <button> 元素。
  • 每个指示器按钮上的 data-bs-target 属性指向轮播的 id。
  • data-bs-slide-to 属性指定要前往的幻灯片的从零开始的索引。
  • 激活的指示器需要 .active 类和 aria-current="true"。

幻灯片容器（.carousel-inner）：

  • 这个 div 包含所有单个幻灯片。
  • 每个幻灯片都是一个带有类 .carousel-item 的 div（替换了旧的 .item 类）。
  • 必须有一个 .carousel-item 具有 .active 类才能在初始时可见。
  • 轮播项目中的图像通常使用 .d-block.w-100 来确保它们显示为块级元素并跨越轮播项目的完整宽度。始终包含 alt 文本以提高可访问性。

左右控件（.carousel-control-prev，.carousel-control-next）：

  • 这些是 <button> 元素，允许手动导航。
  • data-bs-target 指向轮播的 id。
  • data-bs-slide="prev" 或 data-bs-slide="next" 控制滑动方向。
  • .carousel-control-prev-icon 和 .carousel-control-next-icon 是经过样式设置的 <span> 元素，用于创建 Chevron 图标（无需外部图片文件）。
  • .visually-hidden 文本为屏幕阅读器提供无障碍访问标签。

为幻灯片添加说明文字

Section titled “为幻灯片添加说明文字”

在任何 .carousel-item 中添加 <div class="carousel-caption"> 以包含说明文字。说明文字可以使用显示工具类（如 .d-none .d-md-block，默认为隐藏，在中等屏幕及以上显示为块级元素）在较小视口上隐藏。

上面的示例已经使用这种结构包含了说明文字：

<div class="carousel-item active">
  <img src="..." class="d-block w-100" alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>Slide label</h5>
    <p>Caption text for the slide.</p>
  </div>
</div>

其他轮播功能包括深色变体（.carousel-dark，用于在浅色背景上使用时，默认的白色控件/说明文字不可见）、淡入淡出过渡（.carousel-fade）以及通过 data-bs-interval 设置单个幻灯片的切换间隔。

Section titled “完整的 Bootstrap Carousel 参考”

有关所有轮播选项、方法和事件的完整参考，请查阅 Bootstrap 官方文档中关于“Carousel”的部分。