Boostrap部落格網站搭建(三)-首頁輪播圖實現
阿新 • • 發佈:2019-02-02
1、使用輪播圖外掛
這裡我們使用swiper.js外掛並附上下載地址:https://pan.baidu.com/s/1c3MifM4
下面就需要新增HTML程式碼了
<div class="jumbotron container-slider"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./images/header-bg.jpg" width="100%"/></div> <div class="swiper-slide"><img src="./images/header-bg1.jpg" width="100%"/></div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> </div>
然後自定義分頁樣式
.container-slider{ margin-top: 60px; width: 100%; height: auto; padding: 0px; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-pagination-bullet { width: 75px; height: 12px; text-indent: -999em; border-radius: 6px; cursor: pointer; opacity: .4; background: #fff; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; } .swiper-pagination-bullet-active { background: #fff; opacity: 1; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin:0 10px; }
最後配置輪播指令碼
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});
</script>
然後就可以得到我們想要的輪播效果了
下一章節,我們將介紹怎麼實現技術支援這一板塊的首頁效果。