Bootstrap/docs/4.5/components/carousel

来自菜鸟教程
跳转至:导航、​搜索

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

这个怎么运作

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

在浏览器中 页面可见性API 如果支持,则当用户看不到网页时,轮播会避免滑动(例如,当浏览器选项卡处于非活动状态,浏览器窗口最小化时等)。

该组件的动画效果取决于 prefers-reduced-motion 媒体查询。 见 辅助功能文档中的慢动部分 .


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

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

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

The .active 需要将课程添加到其中一张幻灯片中 否则,旋转木马将不可见。 另外,请务必在 .carousel 用于可选控件,尤其是在单个页面上使用多个轮播的情况下。 控件和指标元素必须具有 data-target 属性(或 href (用于链接)与 .carousel 元件。

仅幻灯片

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

<div class="carousel slide" data-ride="carousel" id="carouselExampleSlidesOnly">
<div class="carousel-inner">
<div class="carousel-item active">
<svg aria-label="Placeholder: First slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#777" height="100%" width="100%"></rect><text dy=".3em" fill="#555" x="50%" y="50%"> 第一张幻灯片 </text></svg>
</div>
<div class="carousel-item">
<svg aria-label="Placeholder: Second slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#666" height="100%" width="100%"></rect><text dy=".3em" fill="#444" x="50%" y="50%"> 第二张幻灯片 </text></svg>
</div>
<div class="carousel-item">
<svg aria-label="Placeholder: Third slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#555" height="100%" width="100%"></rect><text dy=".3em" fill="#333" x="50%" y="50%"> 第三张幻灯片 </text></svg>
</div>
</div>
</div>

带控件

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

<div class="carousel slide" data-ride="carousel" id="carouselExampleControls">
<div class="carousel-inner">
<div class="carousel-item active">
<svg aria-label="Placeholder: First slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#777" height="100%" width="100%"></rect><text dy=".3em" fill="#555" x="50%" y="50%"> 第一张幻灯片 </text></svg>
</div>
<div class="carousel-item">
<svg aria-label="Placeholder: Second slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#666" height="100%" width="100%"></rect><text dy=".3em" fill="#444" x="50%" y="50%"> 第二张幻灯片 </text></svg>
</div>
<div class="carousel-item">
<svg aria-label="Placeholder: Third slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#555" height="100%" width="100%"></rect><text dy=".3em" fill="#333" x="50%" y="50%"> 第三张幻灯片 </text></svg>
</div>
</div>
<a class="carousel-control-prev" data-slide="prev" href="#carouselExampleControls" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" data-slide="next" href="#carouselExampleControls" role="button">
<span aria-hidden="true" class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>

有指标

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

<div class="carousel slide" data-ride="carousel" id="carouselExampleIndicators">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carouselExampleIndicators">
</li><li data-slide-to="1" data-target="#carouselExampleIndicators">
</li><li data-slide-to="2" data-target="#carouselExampleIndicators">
</li></ol>
<div class="carousel-inner">
<div class="carousel-item active">
<svg aria-label="Placeholder: First slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#777" height="100%" width="100%"></rect><text dy=".3em" fill="#555" x="50%" y="50%"> 第一张幻灯片 </text></svg>
</div>
<div class="carousel-item">
<svg aria-label="Placeholder: Second slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#666" height="100%" width="100%"></rect><text dy=".3em" fill="#444" x="50%" y="50%"> 第二张幻灯片 </text></svg>
</div>
<div class="carousel-item">
<svg aria-label="Placeholder: Third slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#555" height="100%" width="100%"></rect><text dy=".3em" fill="#333" x="50%" y="50%"> 第三张幻灯片 </text></svg>
</div>
</div>
<a class="carousel-control-prev" data-slide="prev" href="#carouselExampleIndicators" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" data-slide="next" href="#carouselExampleIndicators" role="button">
<span aria-hidden="true" class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>

带字幕

使用轻松将字幕添加到幻灯片 .carousel-caption 任何内的元素 .carousel-item 。可以将它们隐藏在较小的视口中,如下所示,并带有可选 显示工具 。我们最初将它们隐藏起来 .d-none 然后将它们带回中型设备 .d-md-block.

<div class="carousel slide" data-ride="carousel" id="carouselExampleCaptions">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carouselExampleCaptions">
</li><li data-slide-to="1" data-target="#carouselExampleCaptions">
</li><li data-slide-to="2" data-target="#carouselExampleCaptions">
</li></ol>
<div class="carousel-inner">
<div class="carousel-item active">
<svg aria-label="Placeholder: First slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#777" height="100%" width="100%"></rect><text dy=".3em" fill="#555" x="50%" y="50%"> 第一张幻灯片 </text></svg>
<div class="carousel-caption d-none d-md-block">
<h5> 第一张幻灯片标签 </h5>
<p> Nulla vitae elit libero,一种相间的augu mollis interdum。 </p>
</div>
</div>
<div class="carousel-item">
<svg aria-label="Placeholder: Second slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#666" height="100%" width="100%"></rect><text dy=".3em" fill="#444" x="50%" y="50%"> 第二张幻灯片 </text></svg>
<div class="carousel-caption d-none d-md-block">
<h5> 第二张幻灯片标签 </h5>
<p> 文字填充文字填充文字填充文字填充</p>
</div>
</div>
<div class="carousel-item">
<svg aria-label="Placeholder: Third slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#555" height="100%" width="100%"></rect><text dy=".3em" fill="#333" x="50%" y="50%"> 第三张幻灯片 </text></svg>
<div class="carousel-caption d-none d-md-block">
<h5> 第三张幻灯片标签 </h5>
<p> Prasent commodo cursus magna,vel celesque nisl consectetur。 </p>
</div>
</div>
</div>
<a class="carousel-control-prev" data-slide="prev" href="#carouselExampleCaptions" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" data-slide="next" href="#carouselExampleCaptions" role="button">
<span aria-hidden="true" class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>

淡入淡出

Add .carousel-fade 旋转木马,以淡入淡出过渡而不是幻灯片为幻灯片动画。

<div class="carousel slide carousel-fade" data-ride="carousel" id="carouselExampleFade">
<div class="carousel-inner">
<div class="carousel-item active">
<svg aria-label="Placeholder: First slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#777" height="100%" width="100%"></rect><text dy=".3em" fill="#555" x="50%" y="50%"> 第一张幻灯片 </text></svg>
</div>
<div class="carousel-item">
<svg aria-label="Placeholder: Second slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#666" height="100%" width="100%"></rect><text dy=".3em" fill="#444" x="50%" y="50%"> 第二张幻灯片 </text></svg>
</div>
<div class="carousel-item">
<svg aria-label="Placeholder: Third slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#555" height="100%" width="100%"></rect><text dy=".3em" fill="#333" x="50%" y="50%"> 第三张幻灯片 </text></svg>
</div>
</div>
<a class="carousel-control-prev" data-slide="prev" href="#carouselExampleFade" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" data-slide="next" href="#carouselExampleFade" role="button">
<span aria-hidden="true" class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>

个人 .carousel-item 间隔

Add data-interval="" to a .carousel-item 更改在自动循环至下一个项目之间延迟的时间。

<div class="carousel slide" data-ride="carousel" id="carouselExampleInterval">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<svg aria-label="Placeholder: First slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#777" height="100%" width="100%"></rect><text dy=".3em" fill="#555" x="50%" y="50%"> 第一张幻灯片 </text></svg>
</div>
<div class="carousel-item" data-interval="2000">
<svg aria-label="Placeholder: Second slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#666" height="100%" width="100%"></rect><text dy=".3em" fill="#444" x="50%" y="50%"> 第二张幻灯片 </text></svg>
</div>
<div class="carousel-item">
<svg aria-label="Placeholder: Third slide" class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" focusable="false" height="400" preserveaspectratio="xMidYMid slice" role="img" width="800" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#555" height="100%" width="100%"></rect><text dy=".3em" fill="#333" x="50%" y="50%"> 第三张幻灯片 </text></svg>
</div>
</div>
<a class="carousel-control-prev" data-slide="prev" href="#carouselExampleInterval" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" data-slide="next" href="#carouselExampleInterval" role="button">
<span aria-hidden="true" class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>

用法

通过数据属性

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

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

通过JavaScript

手动致电轮播:

选项

可以通过数据属性或JavaScript传递选项。 对于数据属性,将选项名称附加到 data- ,如 data-interval="".

Name Type 默认 描述
间隔 5000 自动循环项目之间的延迟时间。 如果为假,则轮播不会自动循环。
键盘 布尔 true 轮播是否应该对键盘事件做出反应。
暂停 字符串布尔值 “徘徊”

如果设置为 "hover" ,可暂停轮播的循环 mouseenter 并继续轮播的循环 mouseleave 。如果设置为 false ,将鼠标悬停在转盘上不会使其暂停。

在启用触摸功能的设备上,如果设置为 "hover" ,骑车将在 touchend (一旦用户完成了与轮播的互动),就需要两个间隔,然后自动恢复。 请注意,这是上述鼠标行为的补充。

ride 用户手动循环第一项后,自动播放轮播。 如果为“轮播”,则在加载时自动播放轮播。
wrap 布尔 true 轮播是否应该连续循环或有硬停止。
触摸 布尔 true 轮播是否应支持触摸屏设备上的向左/向右滑动交互。

方法

异步方法和转换

所有API方法都是 异步 然后开始 过渡 。转换开始后,他们会立即返回给呼叫者,但 在结束之前 。此外,在 过渡组件将被忽略 .

有关更多信息,请参见我们的JavaScript文档。 .


.carousel(options)

使用可选选项初始化轮播 object 并开始循环浏览各个项目。

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

.carousel('dispose')

摧毁元素的轮播。

活动

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

  • direction :轮播的滑动方向(任一 "left" or "right" ).
  • relatedTarget :作为活动项目滑入到位的DOM元素。
  • from :当前项目的索引
  • to :下一项的索引

所有轮播事件都会在轮播本身上触发(即 在 <div class="carousel"> ).

事件类型 描述
slide.bs.carousel slide 实例方法被调用。
滑动转盘 当轮播完成幻灯片切换后,就会触发此事件。

变更过渡时间

的过渡时间 .carousel-item 可以用 $carousel-transition 如果您使用的是已编译的CSS,请在编译或自定义样式之前使用Sass变量。 如果应用了多个过渡,请确保先定义了转换过渡(例如 transition: transform 2s ease, opacity .5s ease-out ).