Bootstrap 为旋转木马组件提供了三个选项,interval ,它控制的是自动播放幻灯片的时候,播放下一张幻灯片之前停留的时间。这个选项默认的值是 5000 ,单位是毫秒,也就是 5 秒钟的时间。
如果把这个选项的值,设置成 false ,幻灯片就不会自动播放了。
pause 选项可以控制暂停播放幻灯片的方式。默认的值是 hover,表示鼠标悬停,也是把鼠标放在幻灯片上面的时候就会暂停播放幻灯片,离开以后,又会继续自动播放。
wrap 选项默认的值是 true ,它可以控制是否循环播放幻灯片。
下面,我们可以去试一下这几个选项,设置这些选项,可以使用 Bootstrap 的 data api ,也就是在幻灯片元素上,添加 data 后面加上选项的名字,然后再设置一下对应的选项的值就行了。或者,我们也可以通过 JavaScript 的方式去设置这些选项。
先找到幻灯片的包装元素 ... 也就是这个带 carousel 类的 div 标签 ... 在这个标签上面,去添加几个 data 属性设置一下幻灯片的选项 ..
先去设置一下自动播放幻灯片时的间隔时间 ... 用一个 data ... 后面是选项的名字 ... interval ... 然后是这个选项的值 ... 默认是 5000 ... 这里我们设置成 1000 ... 表示 1 秒钟 ...
保存 .. 回到浏览器 ... 点击播放 ... 现在,自动播放幻灯片的时候,会每隔一秒钟播放一张 ...
回到编辑器 ... 再添加一个 data-pause ... pause 这个选项的默认的值是 hover ... 这里我们设置成 false ....
再回到浏览器 ... 刷新 .... 点击播放 ... 然后把鼠标放到幻灯片的上面 ... 现在鼠标悬停到幻灯片上面,也不会暂停播放幻灯片了 ...
再回到编辑器 ... 再添加一个 data-wrap .... 把它的值设置成 false ...
保存 ... 回到浏览器 ... 刷新 ...
点击这个箭头图片播放下一张幻灯片 ... 这是最后一张幻灯片 ... 再点一下这个箭头.. 不会再重新播放第一张幻灯片 ... 因为我们把 wrap 选项设置成了 false .... 如果设置成 true 的话 .. 在播放到最后一张幻灯片的时候,播放的下一张幻灯片会是第一张幻灯片 ... 也就是会去循环去播放旋转木马里面的幻灯片 ...