bootstrap 輪播圖使用
阿新 • • 發佈:2018-07-25
輪播 phi -s 設置 oot -- inner rip 滾動
1、html
<div id="myCarousel" class="carousel slide"> <!--設置輪播器區域樣式,設置輪播器滾動樣式--> <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> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <!--設置輪播器圖片區域--> <div class="item active tp1"> <!--設置輪播器圖片樣式--> <a href="#"><img src="{% static 'imgs/banner/b1.jpg' %}" alt="第一張"></a> </div> <div class="item tp2"> <a href="#"><img src="{% static 'imgs/banner/b2.jpg' %}" alt="第二張"></a> </div> <div class="item tp3"> <a href="#"><img src="{% static 'imgs/banner/b3.jpg' %}" alt="第三張"></a> </div> <div class="item tp4"> <a href="#"><img src="{% static 'imgs/banner/b4.jpg' %}" alt="第三張"></a> </div> </div> <!--設置輪播器箭頭區域--> <a href="#myCarousel" data-slide="prev" class="carousel-control left"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#myCarousel" data-slide="next" class="carousel-control right"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
2、js
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script>
$('.carousel').carousel({
interval: 2000
})
</script>
3、css
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
bootstrap 輪播圖使用