Bootstrap JS 轮播

JS 轮播 (carousel.js)

Carousel 插件是一个用于循环浏览元素的组件，例如轮播（幻灯片）。

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

笔记：Internet Explorer 9 及更早版本中不正确支持轮播（因为它们使用 CSS3 过渡和动画来实现幻灯片效果）。

Carousel 插件类

Class	Description
.carousel	Creates a 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
.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
.icon-next	Unicode icon (arrow pointing right), used in carousels. This is often used instead of a glyphicon
.icon-prev	Unicode icon (arrow pointing left), used in carousels. This is often used instead of a glyphicon
.item	Specifies the content of each slide
.left carousel-control	Adds a left button to the carousel, which allows the user to go back between the slides
.right carousel-control	Adds a right button to the carousel, which allows the user to go forward between the slides
.carousel-caption	Specifies a caption for the carousel

通过 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="left carousel-control" href="#myCarousel" data-slide="prev">

亲自试一试 »

通过JavaScript

手动启用：

示例

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

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

// Enable Carousel Controls
$(".left").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
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	尝试一下

轮播活动

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

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	尝试一下

更多示例

幻灯片标题

添加<div class="carousel-caption">每个内<div class="item">为每张幻灯片创建标题：

示例

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

<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>


<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
</div>


<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</div>

亲自试一试 »