这篇文章要跟你分享几个使用bootstrap的小技巧
包括:
移除换页的箭头及按钮改变幻灯片停留的时间关闭自动轮播关闭轮播暂停关闭自动开始播放之前我们在当只有一张图片的时候、隐藏bootstrap carousel的箭头和按钮这篇文章中分享了如何在判断只有一张图片的时候隐藏bootstrap carousel的箭头和按钮的技计。但是、如果你只是单纯的希望移除换页的箭头及换钮的话,只要移除相关的html标签就可以了。
移除换页的箭头及按钮<div id = carousel-example-generic class = carousel slide data-ride = carousel > <!-- indicators --> <ol class = carousel-indicators >
….
</ol>
<!-- wrapper for slides --> <div class = carousel-inner role = listbox >
...
</div>
<!-- controls -->
<a class=left carousel-control ...
</a>
<a class=right carousel-control ...
</a> </div>
上面是一个基本的bootstrap carousel,我们把箭页和按钮的html标签移掉就会变成这样:
<divid = carousel-example-generic class = carousel slide data-ride = carousel > <!-- wrapper for slides --> <divclass = carousel-inner role = listbox >
?
?
...
?</div> </div>
上面这段html只会保留幻灯片的部份、不会有换页的箭头及按钮。
改变幻灯片停留的时间bootstrap carousel 每张幻灯片预设的停留时间为5秒(5000毫秒),如果想要改变停留的时间,可以加上interval这个选项。底下的范例是将每张幻灯片停留的时间改为2秒(2000毫秒)。
$ ( '.carousel' ). carousel ({
interval : 2000 })
取消自动轮播若是想要取消自动轮播可以使将interval设为false。
$ ( '.carousel' ). carousel ({
interval : false })
轮播暂停bootstrap carousel的预设状态是:当滑鼠滑入时,轮播暂停。如果想要让滑鼠滑入时继续轮播的话,就要使用以下的设定。
$ ( '.carousel' ). carousel ({
pause : false })
自动开始播放如果在html加上data-ride=”carousel”的话,那么bootstrap carousel广告轮播器就会在页面载入之后、自动开始播放。如果移除data-ride=”carousel”的话,那么只有当使用者点系箭头或按钮之后,轮播器才会开始播放。
//自动开始播放的轮播器< div id = carousel-example-generic class = carousel slide data - ride = carousel > //轮播的内容... </ div >
//手动开始播放的轮播器< div id = carousel-example-generic class = carousel slide > //轮播的内容... </ div >