5.11.3　JavaScript用法

5.11.3　JavaScript用法

默认情况下，如果在容器元素上已经定义了data-ride="carousel"属性，页面加载以后，就会自动加载该轮播插件进行图片切换。如果没有这个属性的话，可以使用JavaScript代码来触发这个行为。用法如下：

$('.carousel').carousel();          // 所有带carousel样式的容器元素都开启轮播
// 或者
$('#carousel-container').carousel();     // 针对特定元素，开启轮播

1.选项

在开启轮播的时候，可以像自定义属性一样，使用另外3个额外的option选项，不同的只是去除data-前缀，具体如表5-19所示。

5.11.3　JavaScript用法 - 图1

使用时，在初始化插件的时候传入对象字面量参数即可。例如：

$('.carousel').carousel({
    interval: 2000
})

2.方法

除了在初始化时支持自定义属性以外，该插件还支持外部调用，即，当你获取一个轮播插件的实例以后，可以在该实例上应用如下几个方法，以达到自己想要的效果，使用方法和用途如表5-20所示。

5.11.3　JavaScript用法 - 图2

关于插件实例的获取，所有的插件都一样，那就是，在初始化插件以后，通过一个自定义属性（data-bs-插件名称）即可获取该插件的实例，然后就可以调用其方法了。示例如下：

var data = $('#carousel-container').data('bs.carousel');
if (data instanceof Carousel) {         // 确保是轮播插件的实例
    data.carousel(0);
    data.carousel('next');
}

3.事件

该插件只提供两种事件类型，解释和用法如表5-21所示。

5.11.3　JavaScript用法 - 图3

调用方式也很简单，和普通的jQuery代码并无二样。但两个事件的接收参数却不一样，区别如下：

$('#myCarousel').on('slide.bs.carousel', function (relatedTarget, direction) {
    console.log(relatedTarget.html());  // 输出：<div class="item"><img alt="第一张
                                                // 图" src="A" /></div>
    console.log(direction);             // left
    // 处理代码...
})
 
$('#myCarousel').on('slid.bs.carousel', function () {
    // 处理代码…
})

可以看出，slide事件回调里，可以获取当前即将要显示的图片元素的父元素和轮播方向。获取这两个对象以后，就可以很灵活地定义自己的处理逻辑了。

5.11.3 JavaScript用法