Skip to main content Skip to docs navigation

轮播

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

目录

怎么运行的

🌐 How it works

  • 旋转木马是一个用于循环展示一系列内容的幻灯片，使用 CSS 3D 变换和少量 JavaScript 构建。它可以用于一系列图片、文本或自定义标记。它还包括对上一页/下一页控件和指示器的支持。

  • 出于性能考虑，轮播必须使用轮播构造方法手动初始化。如果不进行初始化，某些事件监听器（特别是需要触摸/滑动支持的事件）在用户明确激活控件或指示器之前将不会被注册。

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

  • 不支持嵌套轮播。你还应该注意，轮播通常会引起可用性和可访问性的问题。

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> 元素，但你也可以使用带有 role="button" 的 <a> 元素。

🌐 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）。

指标

🌐 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 添加到你的轮播中，以便使用淡入淡出过渡动画代替滑动过渡动画。根据你的轮播内容（例如，仅文本的幻灯片），你可能需要将 .bg-body 或一些自定义 CSS 添加到 .carousel-item 上，以实现适当的交叉淡入淡出效果。

🌐 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).

出于无障碍考虑，我们建议避免使用自动播放的轮播。如果你的页面确实包含自动播放的轮播，我们建议提供一个额外的按钮或控制来明确暂停/停止轮播。

请参阅 WCAG 2.2 成功标准 2.2.2 暂停、停止、隐藏。

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

.carousel-item 的过渡持续时间可以在编译之前通过 $carousel-transition-duration Sass 变量更改，或者如果你使用的是已编译的 CSS，则可以通过自定义样式更改。如果应用了多个过渡，请确保先定义变换过渡（例如 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-control-icon-filter:       null;

$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; // Deprecated in v5.3.4
$carousel-dark-caption-color:        $black; // Deprecated in v5.3.4
$carousel-dark-control-icon-filter:  invert(1) grayscale(100); // Deprecated in v5.3.4

用法

🌐 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.

NameTypeDefaultDescription
intervalnumber5000The amount of time to delay between automatically cycling an item.
keyboardbooleantrueWhether the carousel should react to keyboard events.
pausestring, 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.
ridestring, booleanfalseIf set to true, autoplays the carousel after the user manually cycles the first item. If set to "carousel", autoplays the carousel on load.
touchbooleantrueWhether the carousel should support left/right swipe interactions on touchscreen devices.
wrapbooleantrueWhether 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 构造函数创建一个轮播实例，并传递任何额外的选项。例如，要手动初始化一个自动播放的轮播（假设你没有在标记本身使用 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
})
MethodDescription
cycleStarts cycling through the carousel items from left to right.
disposeDestroys an element’s carousel. (Removes stored data on the DOM element)
getInstanceStatic method which allows you to get the carousel instance associated to a DOM element. You can use it like this: bootstrap.Carousel.getInstance(element).
getOrCreateInstanceStatic 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).
nextCycles to the next item. Returns to the caller before the next item has been shown (e.g., before the slid.bs.carousel event occurs).
nextWhenVisibleDon’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.
pauseStops the carousel from cycling through items.
prevCycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the slid.bs.carousel event occurs).
toCycles 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 的轮播（carousel）类提供了两个事件，用于挂接到轮播功能。这两个事件具有以下附加属性：

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

  • direction：旋转木马滑动的方向（"left" 或 "right"）。
  • relatedTarget：作为活动项滑入到位的 DOM 元素。
  • from：当前项目的索引
  • to：下一项的索引

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

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

事件类型描述
slid.bs.carousel当轮播完成幻灯片过渡时触发。
slide.bs.carousel当调用 slide 实例方法时立即触发。
const myCarousel = document.getElementById('myCarousel')

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