一开始，我们在旋转木马的元素上添加了一个 data-ride 属性，把它的值设置成了 carousel，这样这个旋转木马组件就可以自动转动了 ..

除了这种使用自定义的 data 属性以后，我们也可以使用 JavaScript 去设置一下它 ..

打开自定义的脚本文件 .. 先用 jQuery 找到页面上的带 carousel 这个类的元素 .. 然后在上面用一下 Bootstrap 提供的 carousel 这个方法 ..

5 秒以后 .. 会自动播放下一个项目 ..

这个间隔我们也可以去配置一下 .. 给这个 carousel 方法一个对象参数 .. 添加一个 interval 属性，对应的值就是间隔的时间，默认是 5000 就是 5 秒钟 .. 这里我们把它设置成 1000 ..

现在每隔一秒钟就会切换显示下一个项目 .. 还有些选项你可以参考官方的文档 ..

data

配置选项也可以使用自定义的 data 属性 .. 回到页面 . 找到 carousel 元素 .. 配置选项都是用 data 作为前缀，后面是选项的名字，比如配置一下 interval .. 对应的值就是这个选项的值 .. 设置成 1000

这样跟直接使用 JavaScript 的配置是一样的 ..

控制

我们还可以通过 JavaScript 去控制幻灯片的播放 .. 我们可以先在浏览器的控制台上去试一下这些控制方法 .

先找到旋转木马元素 .. 就是带 carousel 这个类的元素 .. 用一下 carousel 方法 .. 向后播放，可以给这个方法一个 next ...

向前播放 .. 可以给这个方法一个 prev .. 也可以给它一个具体的数字 .. 比如要显示旋转木马里面的第二个项目 .. 给这个 carousel 方法一个数字 1 .. 因为这个序号是从零开始的 .. 第二个项目的序号就是数字 1

事件

再播放还有完成播放的时候都会发生自定义的事件 .. 我们可以监听这些事情去做一些事情 .. 回到自定义的脚本文件 ..

找到旋转木马组件所在的元素 .. 用一下 on 这个方法，监听一下 slide.bs.carousel 这个事件， 一个回调 .. 接收一个 event ，事件参数 ..

发生这个事件以后，可以在控制台上先输出一个 slide .. 后面再添加一个字符模板 ..

在事件对象里面有一些有用的东西 .. 比如滚动的方向 .. 输出一个 event.direction .. 从 event.from ... 到 event.to ..

一个项目播放完成以后，会触发 slid.bs.carousel 这个事件 .. 复制一份 .. 监听一下这个事件 .. slid ..

预览

再预览一下 .. 向后播放一个项目 .. 会先发生 slide.bs.carousel .. 完成以后，又会发生 slid.bs.carousel ..

这里会输出滚动的方向 .. 还有 从 哪个项目 到哪个项目 ..