bootstrap carousel轮播插件常见问题不自动播放
bootstrap carousel轮播插件常见问题不自动播放css
bootstrap 如今有不少版本，不一样的版本有不一样的轮播效果，能够试一下，能够引入bootstrap.js或者引入carousel.jsjquery
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<style>
#myCarousel { width: 900px;margin: 20px auto;}
.carousel-control span { display: block;font-size: 150px;margin-top: 120px;}
</style>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（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">
<a href="http://www.baidu.com"><img src="img/1.jpg" alt="First slide"></a>
<div class="carousel-caption">兰博基尼</div>
</div>
<div class="item">
<a href="http://www.jd.com"><img src="img/2.jpg" alt="Second slide"></a>
<!--<div class="carousel-caption">蓝宝坚尼</div>-->
</div>
<div class="item">
<a href="http://www.taobao.com"><img src="img/6.jpg" alt="Third slide"></a>
<!--<h1 class="carousel-caption">布加迪</h1>-->
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev"><span>‹</span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><span>›</span>
</a>
</div>
</body>
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>bootstrap
上面引入的版本是正常的，其余版本会出现轮播不自动播放，一行代码解决问题 ↓ide
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">spa
或者插件
$('#myCarousel').carousel();cdn
若是改变轮播时间间隔修改interval参数 ↓ip
$(function(){
$('#myCarousel').carousel({
interval: 1000
});
});get
设置不自动播放 ↓it
$(function(){
$('#myCarousel').carousel({
pause: true,
interval: false
});
});
- 1. Bootstrap插件-carousel(轮播图)
- 2. Bootstrap 轮播（Carousel）插件
- 3. Bootstrap之轮播 carousel
- 4. 解决BootStrap 轮播图不自动播放问题
- 5. bootstrap 轮播插件
- 6. BootStrap轮播图 (自动轮播)
- 7. bootstrap4-Carousel 轮播
- 8. bootstrap 轮播图插件
- 9. 基于jquery实现轮播图自动轮播，不用插件
- 10. Bootstrap 图片自动轮播
- 更多相关文章...
- • 二级缓存的并发访问策略和常用插件 - Hibernate教程
- • Maven 插件 - Maven教程
- • IntelliJ IDEA中SpringBoot properties文件不能自动提示问题解决
- • SpringBoot中properties文件不能自动提示解决方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。