📌  相关文章
📜  Bootstrap-轮播插件

📅  最后修改于: 2020-10-27 06:24:57             🧑  作者: Mango

 

Bootstrap轮播是一种灵活的响应式方法，可以向您的站点添加滑块。除了具有响应能力之外，内容还具有足够的灵活性，可以包含图像，iframe，视频或您可能需要的几乎任何类型的内容。

如果要单独包含此插件功能，则需要carousel.js 。另外，如《 Bootstrap插件概述》一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js 。

例

下面的简单幻灯片显示了一个通用组件，该组件使用Bootstrap旋转木马插件在诸如旋转木马的元素之间循环。要实现轮播，您只需添加带有标记的代码。不需要数据属性，只需要简单的基于类的开发即可。

现场演示

可选字幕

您可以在任何.item中使用.carousel-caption元素轻松为幻灯片添加字幕。在其中几乎放置任何可选HTML，它将自动对齐并设置格式。以下示例演示了这一点-

现场演示

用法

  • 通过数据属性-使用数据属性可轻松控制转盘的位置。
    • 属性data-slide接受关键字prev或next ，这将相对于其当前位置更改幻灯片的位置。
    • 使用data-slide-to将原始幻灯片索引传递到轮播数据data-slide-to =“ 2″ ，该操作会将幻灯片位置移动到以0开始的特定索引。
    • data-ride =“ carousel”属性用于将轮播标记为从页面加载开始的动画。
  • 通过JavaScript-可以使用JavaScript手动调用轮播，如下所示-
$('.carousel').carousel()

选件

下表列出了可以通过数据属性或JavaScript传递的某些选项-

Option Name Type/Default Value Data attribute name Description
interval number Default − 5000 data-interval The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause string Default − “hover” data-pause Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
wrap boolean Default − true data-wrap Whether the carousel should cycle continuously or have hard stops.

方法

这是可以与轮播代码一起使用的有用方法的列表。

Method Description Example
.carousel(options) Initializes the carousel with an optional options object and starts cycling through items. 
$('#identifier').carousel({
   interval: 2000
})
.carousel(‘cycle’) Cycles through the carousel items from left to right. 
$('#identifier').carousel('cycle')
.carousel(‘pause’) Stops the carousel from cycling through items. 
$('#identifier')..carousel('pause')
.carousel(number) Cycles the carousel to a particular frame (0 based, similar to an array). 
$('#identifier').carousel(number)
.carousel(‘prev’) Cycles to the previous item. 
$('#identifier').carousel('prev')
.carousel(‘next’) Cycles to the next item. 
$('#identifier').carousel('next')

例

以下示例演示了方法的用法-

现场演示

大事记

Bootstrap的轮播类展示了两个挂钩到轮播功能的事件，这些事件在下表中列出。

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

例

以下示例演示了事件的用法-

现场演示