关于boostrap的轮播(Carousel)插件不能自动播放的问题

近段时间,我按照w3c上boostrap的教程写轮播,写完发现这个轮播不能自动播放,需要手工点击到上一张或者下一张的图片后,才能自动播放,经过上网查资料才发现,w3c上的代码少了一个重要的地方:

< div id = "myCarousel" class = "carousel slide" data-ride="carousel" >
<!-- w3c中的轮播代码少了 data-ride="carousel" 所以不能自动播放,需要点击后才可以自动播放 -->
<!-- 轮播(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 >
</ ol >
<!-- 轮播(Carousel)项目 -->
< div class= "carousel-inner" >
< div class= "item active" >
< img src= "./images/ph (1).jpg" alt= "First slide" >
</ div >
< div class= "item" >
< img src= "./images/ph (2).jpg" alt= "Second slide" >
</ div >
< div class= "item" >
< img src= "./images/ph (3).jpg" alt= "Third slide" >
</ div >
</ div >
<!-- 轮播(Carousel)导航 -->
< a class= "carousel-control left" href= "#myCarousel" data-slide= "prev" ></ a >
< a class= "carousel-control right" href= "#myCarousel" data-slide= "next" ></ a >
</ div >

加上这个:
data-ride= "carousel"
轮播图就可以不用操作自动播放了。

猜你喜欢

转载自blog.csdn.net/nerosolomon/article/details/79106106