swiper

Swiper是純javascript打造的滑動特效插件，⾯面向⼿手機、平板電腦等行動終端。

Swiper能實現觸控螢幕焦點圖、觸控螢幕Tab切換、觸控螢幕多圖切換等常⽤用效果。

Swiper開源、免費、穩定、讓⽤用簡單、功能強⼤大，是架構行動終端⽹網站的重要選擇！

1.先建立一個swiper的運行環境，需要用到的檔案有swiper.min.js和swiper.min.css檔。

<!DOCTYPE html>
<html>
　　<head>
　　　　...
　　　　<link rel="stylesheet" href="path/to/swiper.min.css?1.1.10">
　　</head>
　　<body>
　　　　...
　　</body>

登入後複製

　　<script src="path/to/swiper.min.js?1.1.10"></script>

登入後複製

</html>

登入後複製

2.寫HTML內容。

<div class="swiper-container">
　　<div class="swiper-wrapper">
　　　　<div class="swiper-slide">Slide 1</div>
　　　　<div class="swiper-slide">Slide 2</div>
　　　　<div class="swiper-slide">Slide 3</div>
　　</div>

　　<!-- 如果需要分页器 -->
　　<div class="swiper-pagination"></div>
</div>

登入後複製

3.你可能想要為Swiper定義一個大小，當然不要也行。

.swiper-container {
　　width: 600px;
　　height: 300px;
}

登入後複製

4.初始化Swiper：最好是挨標籤（函數呼叫）

<script>

登入後複製

　　　　var swiper=new Swiper(' .swiper-container',{
　　　　　　autoplay:1000,//自動輪播
　　　　　　autoplayDisableOnInteraction:false　　　　　autoplayDisableOnInteraction:false　　後繼續滾動/
」Hpse　　　　　　　pagination:'.swiper -pagination',//分頁
　　　　　　paginationClickable:true,//小圓點點擊
　　　　　　spaceBetween:30,//圖片間隙#doo#L]>> ## 　　　　})

</script>
</body>

登入後複製

以上是swiper插件簡介以及輪播圖的做法的詳細內容。更多資訊請關注PHP中文網其他相關文章！