轮播(Carousel)

幻灯片组件,用于循环显示元素(图像或文本幻灯片),例如轮播。

怎么运行的

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

在支持Page Visibility API 的浏览器中,当用户看不到网页时(例如,当浏览器时),轮播会避免滑动 标签处于非活动状态,浏览器窗口最小化等)。

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

请注意,不支持嵌套轮播,轮播通常不符合辅助功能选项标准。

最后,如果您要从源代码构建JavaScript,则它requires util.js.

例子

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

.active类需要添加到一张幻灯片中**否则轮播将不可见。 另外,请确保在.carousel上设置可选控件的唯一ID,尤其是在单个页面上使用多个轮播的情况下。 控件和指示器元素必须具有与.carousel元素的ID相匹配的data-target属性(或链接的href)。

仅幻灯片

这是仅带有幻灯片的旋转木马。 请注意,轮播图片上存在.d-block和.w-100,以防止浏览器默认图片对齐。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-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>

带控件

添加上一个和下一个控件:

<div id="carouselExampleControls" class="carousel slide" data-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>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

带指示符

您也可以在控件旁边将指示符添加到轮播中。

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

带字幕

在任何.carousel-item中的.carousel-caption元素可轻松将标题添加到幻灯片。 可以使用可选的display utilities轻松将它们隐藏在较小的视口中,如下所示。 我们最初使用.d-none隐藏它们,然后使用.d-md-block将它们放回中型设备。

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

淡入淡出

将“ .carousel-fade”添加到您的轮播中,以淡入淡出过渡而不是幻灯片为幻灯片动画。

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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>
  <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

各个.carousel-item间隔

.carousel-item中添加data-interval =“”,以更改自动循环到下一个项目之间的延迟时间。

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

用法

通过数据属性

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

data-ride =“ carousel”属性用于将轮播标记为从页面加载开始动画。 如果您不使用data-ride =“ carousel”来初始化您的轮播,则必须自己进行初始化。 不能与同一轮播的(冗余和不必要的)显式JavaScript初始化结合使用。

通过JavaScript

手动控制轮播:

$('.carousel').carousel()

选项(Options)

可以通过数据属性或JavaScript传递选项。 对于数据属性,将选项名称附加到data-,如`data-interval =“”中所示。

Name Type Default Description
interval number 5000 The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
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. Note that this is in addition to the above mouse behavior.

ride string false Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
wrap boolean true Whether the carousel should cycle continuously or have hard stops.
touch boolean true Whether the carousel should support left/right swipe interactions on touchscreen devices.

方法(Methods)

Asynchronous methods and transitions

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.

See our JavaScript documentation for more information.

.carousel(options)

使用可选的“对象”选项初始化轮播,并开始循环浏览各个项目。

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

从左到右循环浏览轮播项目。

.carousel('pause')

阻止轮播在各个项目之间循环。

.carousel(number)

将轮播循环到特定帧(从0开始,类似于数组)。 在显示目标项目之前返回调用者(即在“ slid.bs.carousel”事件发生之前)。

.carousel('prev')

循环到上一个项目。 在显示上一个项目之前返回调用者(即在“ slid.bs.carousel”事件发生之前)。

.carousel('next')

循环到下一个项目。 在显示下一个项目之前返回调用者(即在发生“ slid.bs.carousel”事件之前)。

.carousel('dispose')

销毁元素的轮播。

事件(Events)

Bootstrap的轮播类展示了两个挂钩到轮播功能的事件。 这两个事件具有以下附加属性:

  • direction:转盘滑动的方向(“ left”或“ right”`)。
  • relatedTarget:作为活动项滑入到位的DOM元素。
  • from:当前项目的索引
  • to:下一项的索引

所有轮播事件都会在轮播本身上触发(即在<div class =“ carousel”>`上)。

Event Type Description
slide.bs.carousel This event fires immediately when the slide instance method is invoked.
slid.bs.carousel This event is fired when the carousel has completed its slide transition.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

变更过渡时间

如果使用编译后的CSS,可以在编译或自定义样式之前使用$ carousel-transition` Sass变量来更改.carousel-item的过渡时间。 如果应用了多个过渡,请确保首先定义了变换过渡(例如,“ transition:变换2s缓动,不透明度0.5s缓动”)。