Bootstrap4 JS 轮播

轮播 CSS 类

有关轮播的教程，请阅读我们的Bootstrap 轮播教程。

Class	Description
`.carousel`	Creates a carousel
`.carousel-indicators`	Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing)
`.carousel-inner`	Adds slides to the carousel
`.carousel-item`	Specifies the content of each slide
`.carousel-control-prev`	Adds a left (previous) button to the carousel, which allows the user to go back between the slides
`.carousel-control-next`	Adds a right (next) button to the carousel, which allows the user to go forward between the slides
`.carousel-control-prev-icon`	Used together with .carousel-control-prev to create a "previous" button
`.carousel-control-next-icon`	Used together with .carousel-control-next to create a "next" button
`.carousel-caption`	Specifies a caption for the carousel
`.slide`	Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect

亲自试一试 »

通过 data-* 属性

这个data-ride="carousel"属性激活轮播。

这个data-slide和data-slide-to属性指定要转到哪张幻灯片。

这个data-slide属性接受两个值：上一页或者下一个，尽管data-slide-to接受数字。

示例

<div id="myCarousel" class="carousel slide" data-ride="carousel">


<li data-target="#myCarousel" data-slide-to="1"></li>


<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>

亲自试一试 »

通过JavaScript

手动启用：

示例

// Activate Carousel
$("#myCarousel").carousel();

// Enable Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});

// Enable Carousel Controls
$(".carousel-control-prev").click(function(){
$("#myCarousel").carousel("prev");
});

亲自试一试 »

轮播选项

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

Name	Type	Default	Description	尝试一下
interval	number, or the boolean false	5000	Specifies the delay (in milliseconds) between each slide. Note: Set interval to false to stop the items from automatically sliding	Using JS Using data
keyboard	boolean	true	Specifies whether the carousel should react to keyboard events: true - the carousel can be navigated (next and previous) with the keyboard left and right arrows false - the carousel can NOT be navigated with the keyboard left and right arrows	Using JS Using data
pause	string, or the boolean false	"hover"	Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel Note: Set pause to false to stop the ability to pause on hover	Using JS Using data
wrap	boolean	true	Specifies whether the carousel should go through all slides continuously, or stop at the last slide true - cycle continuously false - stop at the last item	Using JS Using data

轮播方法

下表列出了所有可用的轮播方法。

Method	Description	尝试一下
.carousel(options)	Activates the carousel with an option. See options above for valid values	尝试一下
.carousel("cycle")	Goes through the carousel items from left to right	尝试一下
.carousel("pause")	Stops the carousel from going through items	尝试一下
.carousel(number)	Goes to a specified item (zero-based: first item is 0, second item is 1, etc..)	尝试一下
.carousel("prev")	Goes to the previous item	尝试一下
.carousel("next")	Goes to the next item	尝试一下
.carousel("dispose")	Destroys a carousel

轮播活动

下表列出了所有可用的轮播事件。

Event	Description	尝试一下
slide.bs.carousel	Occurs when the carousel is about to slide from one item to another	尝试一下
slid.bs.carousel	Occurs when the carousel has finished sliding from one item to another	尝试一下

滑动和滑动事件还具有附加属性：

Property	Description	尝试一下
direction	Returns the direction the carousel is sliding (left or right)
relatedTarget	Returns the DOM element that is being slid into place as the active item	尝试一下
from	Returns the index of where the previous item came from, when moving on to the next one	尝试一下
to	Returns the index of the next item	尝试一下