Source旋转木马
用于循环播放元素(图像或文本幻灯片)的幻灯片组件,如轮播。
轮播是一个幻灯片,用于循环浏览一系列内容,使用 CSS 3D 转换和一些 JavaScript 构建。它适用于一系列图像、文本或自定义标记。它还包括对上一个/下一个控件和指示器的支持。
在支持Page Visibility API的浏览器中,当网页对用户不可见时(例如浏览器选项卡处于非活动状态、浏览器窗口最小化等),轮播将避免滑动。
请注意,不支持嵌套轮播,并且轮播通常不符合可访问性标准。
最后,如果你从源代码构建我们的 JavaScript,它需要util.js
.
轮播不会自动标准化幻灯片尺寸。因此,您可能需要使用其他实用程序或自定义样式来适当调整内容的大小。虽然轮播支持上一个/下一个控件和指示器,但它们并不是明确要求的。根据需要添加和自定义。
该类.active
需要添加到其中一张幻灯片,否则轮播将不可见。还要确保在.carousel
可选控件上设置唯一的 id,尤其是当您在单个页面上使用多个轮播时。控件和指示器元素必须具有与元素的 id 匹配的data-target
属性(或href
用于链接).carousel
。
这是一个只有幻灯片的旋转木马。请注意轮播图像上的.d-block
和.w-100
以防止浏览器默认图像对齐。
添加上一个和下一个控件:
您还可以将指示器与控件一起添加到轮播中。
使用.carousel-caption
任何.carousel-item
. 它们可以很容易地隐藏在较小的视口中,如下所示,使用可选的显示实用程序。我们最初使用隐藏它们,.d-none
然后使用.d-md-block
.
第一张幻灯片标签
Nulla vitae elit libero,一种 pharetra augue mollis interdum。
第二张幻灯片标签
Lorem ipsum dolor sit amet, consectetur adipiscing elit。
第三张幻灯片标签
Praesent commodo cursus magna, vel scelerisque nisl consectetur。
以前的
下一个
添加.carousel-fade
到您的轮播以使用淡入淡出过渡而不是幻灯片为幻灯片制作动画。
使用数据属性轻松控制轮播的位置。data-slide
接受关键字prev
or next
,它改变相对于当前位置的幻灯片位置。或者,使用data-slide-to
将原始幻灯片索引传递给 carousel data-slide-to="2"
,这会将幻灯片位置移动到以 开头的特定索引0
。
该data-ride="carousel"
属性用于将轮播标记为在页面加载时开始动画。它不能与同一轮播的(冗余和不必要的)显式 JavaScript 初始化结合使用。
手动调用轮播:
选项可以通过数据属性或 JavaScript 传递。对于数据属性,将选项名称附加到 中data-
,如data-interval=""
.
姓名 |
类型 |
默认 |
描述 |
间隔 |
数字 |
5000 |
自动循环项目之间的延迟时间。如果为 false,carousel 将不会自动循环。 |
键盘 |
布尔值 |
真的 |
轮播是否应对键盘事件做出反应。 |
暂停 |
字符串 | 布尔值 |
“徘徊” |
如果设置为"hover" ,则暂停旋转木马mouseenter 的循环并恢复旋转木马的循环mouseleave 。如果设置为false ,则将鼠标悬停在轮播上不会暂停它。 在启用触摸的设备上,当设置为 时"hover" ,循环将暂停touchend (一旦用户完成与轮播的交互)两个时间间隔,然后自动恢复。请注意,这是对上述鼠标行为的补充。 |
骑 |
细绳 |
错误的 |
在用户手动循环第一个项目后自动播放轮播。如果是“carousel”,则在加载时自动播放轮播。 |
裹 |
布尔值 |
真的 |
转盘是否应连续循环或硬停止。 |
使用可选选项初始化轮播object
并开始循环浏览项目。
从左到右循环浏览轮播项目。
停止轮播在项目中循环。
将轮播循环到特定帧(基于 0,类似于数组)。在显示目标项目之前(即在slid.bs.carousel
事件发生之前)返回给调用者。
循环到上一个项目。在上一个项目显示之前(即在slid.bs.carousel
事件发生之前)返回给调用者。
循环到下一个项目。在显示下一个项目之前(即在slid.bs.carousel
事件发生之前)返回给调用者。
销毁元素的轮播。
Bootstrap 的 carousel 类公开了两个用于连接 carousel 功能的事件。这两个事件都具有以下附加属性:
direction
:轮播的滑动方向("left"
或"right"
)。
relatedTarget
:作为活动项滑入到位的 DOM 元素。
from
: 当前项的索引
to
: 下一项的索引
所有轮播事件都在轮播本身(即在<div class="carousel">
)触发。
事件类型 |
描述 |
slide.bs.carousel |
slide 调用实例方法时立即触发此事件。 |
slide.bs.carousel |
当轮播完成其幻灯片转换时会触发此事件。 |
如果您使用已编译的 CSS ,.carousel-item
可以在编译或自定义样式之前使用 Sass 变量更改过渡持续时间。$carousel-transition
如果应用了多个转换,请确保首先定义转换转换(例如transition: transform 2s ease, opacity .5s ease-out
)。