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文件不能自動提示解決方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。