Skip to main content Skip to docs navigation

轮播

用于循环浏览元素（图片或文本幻灯片）的幻灯片组件，就像轮播一样。

目录

怎么运行的

¥How it works

  • 轮播是一个循环播放一系列内容的幻灯片，使用 CSS 3D 转换和一些 JavaScript 构建。它适用于一系列图片、文本或自定义标记。它还包括对上一个/下一个控件和指示器的支持。

    ¥The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

  • 出于性能原因，必须使用 轮播构造方法 手动初始化轮播。如果没有初始化，一些事件监听器（特别是需要触摸/滑动支持的事件）将不会被注册，直到用户显式激活控件或指示器。

    ¥For performance reasons, carousels must be manually initialized using the carousel constructor method. Without initialization, some of the event listeners (specifically, the events needed touch/swipe support) will not be registered until a user has explicitly activated a control or indicator.

    唯一的例外是具有 data-bs-ride="carousel" 属性的 自动播放轮播，因为它们在页面加载时自动初始化。如果你使用带有 data 属性的自动播放轮播，请勿使用构造函数方法显式初始化相同的轮播。

    ¥The only exception are autoplaying carousels with the data-bs-ride="carousel" attribute as these are initialized automatically on page load. If you’re using autoplaying carousels with the data attribute, don’t explicitly initialize the same carousels with the constructor method.

  • 不支持嵌套轮播。你还应该意识到，轮播通常会导致可用性和可访问性方面的挑战。

    ¥Nested carousels are not supported. You should also be aware that carousels in general can often cause usability and accessibility challenges.

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

基本示例

¥Basic examples

这是带有三张幻灯片的轮播的基本示例。注意上一个/下一个控件。我们建议使用 <button> 元素，但你也可以将 <a> 元素与 role="button" 一起使用。

¥Here is a basic example of a carousel with three slides. Note the previous/next controls. We recommend using <button> elements, but you can also use <a> elements with role="button".

html 
<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." 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>

轮播不会自动标准化幻灯片尺寸。因此，你可能需要使用其他工具或自定义样式来适当调整内容大小。虽然轮播支持上一个/下一个控件和指示器，但它们并不是明确需要的。根据你的需要添加和自定义。

¥Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.

你必须将 .active 类添加到其中一张幻灯片中，否则轮播将不可见。另外，请务必在 .carousel 上为可选控件设置唯一的 id，特别是当你在单个页面上使用多个轮播时。控制和指示器元素必须具有与 .carousel 元素的 id 匹配的 data-bs-target 属性（或链接的 href）。

¥You must add the .active class to one of the slides, otherwise the carousel will not be visible. Also be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a data-bs-target attribute (or href for links) that matches the id of the .carousel element.

指标

¥Indicators

你可以将指示器与上一个/下一个控件一起添加到轮播中。这些指示器可以让用户直接跳转到特定的幻灯片。

¥You can add indicators to the carousel, alongside the previous/next controls. The indicators let users jump directly to a particular slide.

html 
<div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

字幕

¥Captions

你可以使用任何 .carousel-item 中的 .carousel-caption 元素向幻灯片添加标题。使用可选的显示实用程序，可以轻松地将它们隐藏在较小的视口中，如下所示。我们最初使用 .d-none 隐藏它们，然后使用 .d-md-block 将它们带回到中型设备上。

¥You can add captions to your slides with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.

html 
<div id="carouselExampleCaptions" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." 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>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." 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>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." 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>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

交叉淡入淡出

¥Crossfade

将 .carousel-fade 添加到轮播中，以使用淡入淡出转场而不是幻灯片来制作幻灯片动画。根据你的轮播内容（例如，纯文本幻灯片），你可能需要向 .carousel-item 添加 .bg-body 或一些自定义 CSS 以实现正确的交叉淡入淡出。

¥Add .carousel-fade to your carousel to animate slides with a fade transition instead of a slide. Depending on your carousel content (e.g., text only slides), you may want to add .bg-body or some custom CSS to the .carousel-items for proper crossfading.

html 
<div id="carouselExampleFade" class="carousel slide carousel-fade">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

自动播放轮播

¥Autoplaying carousels

你可以通过将 ride 选项设置为 carousel 来使轮播在页面加载时自动播放。当鼠标悬停时，自动播放轮播会自动暂停。可以使用 pause 选项控制此行为。在支持 页面可见性 API 的浏览器中，当用户看不到网页时（例如当浏览器选项卡处于非活动状态或浏览器窗口最小化时），轮播将停止循环。

¥You can make your carousels autoplay on page load by setting the ride option to carousel. Autoplaying carousels automatically pause while hovered with the mouse. This behavior can be controlled with the pause option. In browsers that support the Page Visibility API, the carousel will stop cycling when the webpage is not visible to the user (such as when the browser tab is inactive, or when the browser window is minimized).

For accessibility reasons, we recommend avoiding the use of autoplaying carousels. If your page does include an autoplaying carousel, we recommend providing an additional button or control to explicitly pause/stop the carousel.

See WCAG 2.2 Success Criterion 2.2.2 Pause, Stop, Hide.

html 
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" 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="#carouselExampleAutoplaying" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

当 ride 选项设置为 true 而不是 carousel 时，轮播不会在页面加载时自动开始循环。相反，它只会在第一次用户交互后启动。

¥When the ride option is set to true, rather than carousel, the carousel won’t automatically start to cycle on page load. Instead, it will only start after the first user interaction.

html 
<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" 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="#carouselExampleRide" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

¥Individual .carousel-item interval

将 data-bs-interval="" 添加到 .carousel-item 以更改自动循环到下一个项目之间的延迟时间量。

¥Add data-bs-interval="" to a .carousel-item to change the amount of time to delay between automatically cycling to the next item.

html 
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

无需控件即可自动播放轮播

¥Autoplaying carousels without controls

这是一个仅包含幻灯片的轮播。请注意轮播图片上存在 .d-block 和 .w-100，以防止浏览器默认图片对齐。

¥Here’s a carousel with slides only. Note the presence of the .d-block and .w-100 on carousel images to prevent browser default image alignment.

html 
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

禁用触摸滑动

¥Disable touch swiping

轮播支持在触摸屏设备上向左/向右滑动以在幻灯片之间移动。可以通过将 touch 选项设置为 false 来禁用此功能。

¥Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled by setting the touch option to false.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" 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="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

深色版本

¥Dark variant

Deprecated in v5.3.0

将 .carousel-dark 添加到 .carousel 以获得更暗的控件、指示器和标题。与具有 filter CSS 属性的默认白色填充相比，控件是反转的。标题和控件具有额外的 Sass 变量，可自定义 color 和 background-color。

¥Add .carousel-dark to the .carousel for darker controls, indicators, and captions. Controls are inverted compared to their default white fill with the filter CSS property. Captions and controls have additional Sass variables that customize the color and background-color.

Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of adding .carousel-dark, set data-bs-theme="dark" on the root element, a parent wrapper, or the component itself.

html 
<div id="carouselExampleDark" class="carousel carousel-dark slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." 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>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." 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>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." 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>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

自定义转场

¥Custom transition

如果你使用已编译的 CSS，则可以在编译前使用 $carousel-transition-duration Sass 变量或自定义样式更改 .carousel-item 的转场持续时间。如果应用多个转场，请确保首先定义变换转场（例如 transition: transform 2s ease, opacity .5s ease-out）。

¥The transition duration of .carousel-item can be changed with the $carousel-transition-duration Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (e.g. transition: transform 2s ease, opacity .5s ease-out).

CSS

Sass 变量

¥Sass variables

所有轮播的变量：

¥Variables for all carousels:

scss/_variables.scss 
$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

黑暗的旋转木马 的变量：

¥Variables for the dark carousel:

scss/_variables.scss 
$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

用法

¥Usage

通过数据属性

¥Via data attributes

使用数据属性可以轻松控制轮播的位置。data-bs-slide 接受关键字 prev 或 next，这会更改相对于其当前位置的幻灯片位置。或者，使用 data-bs-slide-to 将原始幻灯片索引传递到轮播 data-bs-slide-to="2"，这会将幻灯片位置移动到以 0 开头的特定索引。

¥Use data attributes to easily control the position of the carousel. data-bs-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-bs-slide-to to pass a raw slide index to the carousel data-bs-slide-to="2", which shifts the slide position to a particular index beginning with 0.

通过 JavaScript

¥Via JavaScript

手动调用轮播：

¥Call carousel manually with:

const carousel = new bootstrap.Carousel('#myCarousel')

选项

¥Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

The final configuration object is the merged result of data-bs-config, data-bs-, and js object where the latest given key-value overrides the others.

Name Type Default Description
interval number 5000 The amount of time to delay between automatically cycling an item.
keyboard boolean true Whether the carousel should react to keyboard events.
pause string, boolean "hover" If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won’t pause it. On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. This is in addition to the mouse behavior.
ride string, boolean false If set to true, autoplays the carousel after the user manually cycles the first item. If set to "carousel", autoplays the carousel on load.
touch boolean true Whether the carousel should support left/right swipe interactions on touchscreen devices.
wrap boolean true Whether the carousel should cycle continuously or have hard stops.

方法

¥Methods

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started, but before it ends. In addition, a method call on a transitioning component will be ignored. Learn more in our JavaScript docs.

你可以使用 carousel 构造函数创建 carousel 实例，并传递任何其他选项。例如，要以特定间隔手动初始化自动播放轮播（假设你没有在标记本身中使用 data-bs-ride="carousel" 属性）并禁用触摸支持，你可以使用：

¥You can create a carousel instance with the carousel constructor, and pass on any additional options. For example, to manually initialize an autoplaying carousel (assuming you’re not using the data-bs-ride="carousel" attribute in the markup itself) with a specific interval and with touch support disabled, you can use:

const myCarouselElement = document.querySelector('#myCarousel')

const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  touch: false
})
Method Description
cycle Starts cycling through the carousel items from left to right.
dispose Destroys an element’s carousel. (Removes stored data on the DOM element)
getInstance Static method which allows you to get the carousel instance associated to a DOM element. You can use it like this: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Static method which returns a carousel instance associated to a DOM element, or creates a new one in case it wasn’t initialized. You can use it like this: bootstrap.Carousel.getOrCreateInstance(element).
next Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the slid.bs.carousel event occurs).
nextWhenVisible Don’t cycle carousel to next when the page, the carousel, or the carousel’s parent aren’t visible. Returns to the caller before the target item has been shown.
pause Stops the carousel from cycling through items.
prev Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the slid.bs.carousel event occurs).
to Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the slid.bs.carousel event occurs).

活动

¥Events

Bootstrap 的轮播类公开了两个事件来钩子轮播功能。这两个事件都具有以下附加属性：

¥Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

  • direction：转盘滑动的方向（"left" 或 "right"）。

    ¥direction: The direction in which the carousel is sliding (either "left" or "right").

  • relatedTarget：作为活动项滑入到位的 DOM 元素。

    ¥relatedTarget: The DOM element that is being slid into place as the active item.

  • from：当前项目的索引

    ¥from: The index of the current item

  • to：下一项的索引

    ¥to: The index of the next item

所有轮播事件均在轮播本身上触发（即在 <div class="carousel"> 处）。

¥All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

Event type Description
slid.bs.carousel Fired when the carousel has completed its slide transition.
slide.bs.carousel Fires immediately when the slide instance method is invoked. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})