direktori cari
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
watak

幻灯片组件,用于循环浏览元素 - 文本的图像或幻灯片 - 如旋转木马。

怎么运行的

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

在支持页面可见性 API 的浏览器中,当网页对用户不可见时(例如,当浏览器选项卡处于非活动状态,浏览器窗口被最小化等)时,传送带将避免滑动。

请注意,嵌套传送带不受支持,传送带通常不符合辅助功能标准。

最后,如果你从源代码构建我们的 JS,它需要util.js

示例

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

请务必在.carousel可选控件上设置唯一的 ID ,特别是在单个页面上使用多个轮播时。

仅限幻灯片

这是一个只有幻灯片的旋转木马。请注意传送带图像.d-block.img-fluid传送带图像的存在,以防止浏览器默认图像对齐。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">  <div class="carousel-inner">    <div class="carousel-item active">      <img class="d-block w-100" src="..." alt="First slide">    </div>    <div class="carousel-item">      <img class="d-block w-100" src="..." alt="Second slide">    </div>    <div class="carousel-item">      <img class="d-block w-100" src="..." alt="Third slide">    </div>  </div></div>

带有(使用)控件

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

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">  <div class="carousel-inner">    <div class="carousel-item active">      <img class="d-block w-100" src="..." alt="First slide">    </div>    <div class="carousel-item">      <img class="d-block w-100" src="..." alt="Second slide">    </div>    <div class="carousel-item">      <img class="d-block w-100" src="..." alt="Third slide">    </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 class="d-block w-100" src="..." alt="First slide">    </div>    <div class="carousel-item">      <img class="d-block w-100" src="..." alt="Second slide">    </div>    <div class="carousel-item">      <img class="d-block w-100" src="..." alt="Third slide">    </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>

需要初始活动元素

.active课程需要添加到其中一张幻灯片中。否则,传送带将不可见。

带有字幕

使用.carousel-caption任何内容中的元素轻松为您的幻灯片添加标题.carousel-item。它们可以很容易地隐藏在较小的视口中,如下所示,带有可选的显示实用程序。我们最初.d-none将它们隐藏起来,并使用.d-md-block将它们带回到中型设备上。

<div class="carousel-item">  <img src="..." alt="...">  <div class="carousel-caption d-none d-md-block">    <h3>...</h3>    <p>...</p>  </div></div>

用法

通过数据属性

使用数据属性可以轻松控制传送带的位置。data-slide接受关键字prev或者next相对于其当前位置改变滑动位置。或者,使用data-slide-to将原始幻灯片索引传递给圆盘传送带data-slide-to="2",将幻灯片位置移至以特定索引开头的位置0

data-ride="carousel"属性用于在转页加载时将转盘标记为动画。它不能与相同轮播的显式 JavaScript 初始化(冗余和不必要的)组合使用。

通过 JavaScript

通过以下方式手动调用轮播:

$('.carousel').carousel()

选项

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

Name

类型

默认

描述

interval

5000

自动循环项目之间的延迟时间。如果为false,传送带将不会自动循环。

keyboard

布尔

旋转木马是否应对键盘事件作出反应。

pause

字符串| 布尔

“徘徊”("hover")

如果设置为“悬停”,则暂停 mouseenter 上的传送带循环并在鼠标离开时恢复传送带循环。如果设置为 false,则悬停在旋转木马上不会暂停。在启用了触摸的设备上,如果设置为“悬停”,则在自动恢复之前,骑行者会在触摸屏上暂停(一旦用户完成与传送带的交互)两个时间间隔。请注意,这是上述鼠标行为的补充。

ride

在用户手动循环第一个项目后自动播放传送带。如果“传送带”在加载时自动播放传送带。

wrap

布尔

转盘是否应该连续循环或难以停止。

方法

异步方法和转换

所有 API 方法都是异步的并开始转换。一旦转换开始但在结束之前,它们就立即返回给调用者。另外,对转换组件的方法调用将被忽略

查看我们的 JavaScript 文档以获取更多信息。

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

摧毁一个元素的圆盘传送带。

活动

Bootstrap 的旋转木马类公开了两个事件用于挂接轮播功能。这两个事件都具有以下附加属性:

  • direction:传送带滑动的方向("left"或者"right")。

  • relatedTarget:作为活动项目滑动到位的DOM元素。

  • from:当前项目的索引

  • to:下一个项目的索引

所有旋转木马事件都在旋转木马本身(即在<div class="carousel">)发射。

事件类型

描述

slide.bs.carousel

此事件在调用幻灯片实例方法时立即触发。

slid.bs.carousel

旋转木马完成幻灯片切换时会触发此事件。

$('#myCarousel').on('slide.bs.carousel', function () {  // do something…})
Artikel sebelumnya: Artikel seterusnya: