旋转木马
用于循环播放元素(图像或文本幻灯片)的幻灯片组件,如轮播。
这个怎么运作
轮播是一个幻灯片,用于循环浏览一系列内容,使用 CSS 3D 转换和一些 JavaScript 构建。它适用于一系列图像、文本或自定义标记。它还包括对上一个/下一个控件和指示器的支持。
在支持Page Visibility API的浏览器中,当网页对用户不可见时(例如浏览器选项卡处于非活动状态、浏览器窗口最小化等),轮播将避免滑动。
prefers-reduced-motion
媒体查询。请参阅
我们可访问性文档的减少运动部分。
请注意,不支持嵌套轮播,并且轮播通常不符合可访问性标准。
最后,如果你从源代码构建我们的 JavaScript,它需要util.js
.
例子
轮播不会自动标准化幻灯片尺寸。因此,您可能需要使用其他实用程序或自定义样式来适当调整内容的大小。虽然轮播支持上一个/下一个控件和指示器,但它们并不是明确要求的。根据需要添加和自定义。
该类.active
需要添加到其中一张幻灯片,否则轮播将不可见。还要确保id
在.carousel
可选控件上设置唯一性,特别是如果您在单个页面上使用多个轮播。控件和指示器元素必须具有与元素匹配的data-target
属性(或href
用于链接)。id
.carousel
仅幻灯片
这是一个只有幻灯片的旋转木马。请注意轮播图像上的.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>
带控件
添加上一个和下一个控件。我们建议使用<button>
元素,但您也可以将<a>
元素与role="button"
.
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
带字幕
使用.carousel-caption
任何.carousel-item
. 它们可以很容易地隐藏在较小的视口中,如下所示,使用可选的显示实用程序。我们最初使用隐藏它们,.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>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-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
淡入淡出
添加.carousel-fade
到您的轮播以使用淡入淡出过渡而不是幻灯片为幻灯片制作动画。根据您的轮播内容(例如,纯文本幻灯片),您可能希望向 s 添加.bg-body
或一些自定义 CSS 以.carousel-item
进行正确的交叉淡入淡出。
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
个人.carousel-item
间隔
添加data-interval=""
到 a.carousel-item
以更改自动循环到下一项之间的延迟时间。
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
禁用触摸滑动
轮播支持在触摸屏设备上向左/向右滑动以在幻灯片之间移动。这可以使用data-touch
属性禁用。下面的示例也不包含该data-ride
属性,data-interval="false"
因此它不会自动播放。
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="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-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
用法
通过数据属性
使用数据属性轻松控制轮播的位置。data-slide
接受关键字prev
or next
,它改变相对于当前位置的幻灯片位置。或者,使用data-slide-to
将原始幻灯片索引传递给 carousel data-slide-to="2"
,这会将幻灯片位置移动到以 开头的特定索引0
。
该data-ride="carousel"
属性用于将轮播标记为在页面加载时开始动画。如果你不使用data-ride="carousel"
初始化你的轮播,你必须自己初始化它。它不能与同一轮播的(冗余和不必要的)显式 JavaScript 初始化结合使用。
通过 JavaScript
手动调用轮播:
$('.carousel').carousel()
选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性,将选项名称附加到 中data-
,如data-interval=""
.
姓名 | 类型 | 默认 | 描述 |
---|---|---|---|
间隔 | 数字 | 5000 | 自动循环项目之间的延迟时间。如果false ,轮播将不会自动循环。 |
键盘 | 布尔值 | 真的 | 轮播是否应对键盘事件做出反应。 |
暂停 | 字符串 | 布尔值 | '徘徊' | 如果设置为 在启用触摸的设备上,当设置为 时 |
骑 | 细绳 | 错误的 | 在用户手动循环第一个项目后自动播放轮播。如果设置为'carousel' ,则在加载时自动播放轮播。 |
裹 | 布尔值 | 真的 | 转盘是否应连续循环或硬停止。 |
触碰 | 布尔值 | 真的 | 轮播是否应支持触摸屏设备上的左/右滑动交互。 |
方法
.carousel(options)
使用可选选项初始化轮播object
并开始循环浏览项目。
$('.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')
销毁元素的轮播。
.carousel('nextWhenVisible')
当页面不可见或轮播或其父级不可见时,请勿将轮播循环到下一个。在显示下一个项目之前(即在slid.bs.carousel
事件发生之前)返回给调用者。
.carousel('to')
将轮播循环到特定帧(基于 0,类似于数组)。在显示下一个项目之前(即在slid.bs.carousel
事件发生之前)返回给调用者。
活动
Bootstrap 的 carousel 类公开了两个用于连接 carousel 功能的事件。这两个事件都具有以下附加属性:
direction
:轮播的滑动方向("left"
或"right"
)。relatedTarget
:作为活动项滑入到位的 DOM 元素。from
: 当前项的索引to
: 下一项的索引
所有轮播事件都在轮播本身(即在<div class="carousel">
)触发。
事件类型 | 描述 |
---|---|
slide.bs.carousel | slide 调用实例方法时立即触发此事件。 |
slide.bs.carousel | 当轮播完成其幻灯片转换时会触发此事件。 |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
更改过渡持续时间
如果您使用已编译的 CSS ,.carousel-item
可以在编译或自定义样式之前使用 Sass 变量更改过渡持续时间。$carousel-transition
如果应用了多个转换,请确保首先定义转换转换(例如transition: transform 2s ease, opacity .5s ease-out
)。