輪播圖外掛swiper
阿新 • • 發佈:2019-02-14
剛用swiper做輪播圖的時候,我一直做不出來,後來發現原來我只引入了swiper的js,沒有引入swiper的css.
這兩個都是必須引入的,而jquery庫無論有沒有都能執行swiper.
基本結構示例:
<!--大圖開始-->
<style>
img{width:100%;}
.swiper-container {
float:left;
width: 50%;
height : 280px;
}
</style>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/timg.jpg"></div>
<div class="swiper-slide"><img src="images/timg.jpg"></div>
<div class="swiper-slide"><img src="images/timg.jpg"></div>
<div class="swiper-slide"><img src="images/timg.jpg"></div>
<div class="swiper-slide"><img src="images/timg.jpg" ></div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination" style="bottom:40px;"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
</script>
<!--大圖結束-->
這就是最基本的用法了。