欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

非常優(yōu)秀的JS圖片輪播插件Swiper的用法

 更新時(shí)間：2017年01月03日 13:56:35   投稿：mrr  
最近在一個(gè)微信公眾號(hào)中用到了swiper圖片輪播插件。接下來為大家介紹插件的用法,需要的朋友可以參考下

最近在一個(gè)微信公眾號(hào)中用到了swiper圖片輪播插件。接下來為大家介紹插件的用法

首先需要下載Swiper

1：加載插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

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

2.HTML內(nèi)容。

<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>
  <!-- 如果需要導(dǎo)航按鈕 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- 如果需要滾動(dòng)條 -->
  <div class="swiper-scrollbar"></div>
</div>

導(dǎo)航等組件可以放在container之外

3.你可能想要給Swiper定義一個(gè)大小，當(dāng)然不要也行。

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

4.初始化Swiper：最好是挨著</body>標(biāo)簽

<script>    
 var mySwiper = new Swiper ('.swiper-container', {
  direction: 'vertical',
  loop: true,
  // 如果需要分頁器
  pagination: '.swiper-pagination',
  // 如果需要前進(jìn)后退按鈕
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  // 如果需要滾動(dòng)條
  scrollbar: '.swiper-scrollbar',
 })    
 </script>
</body>

如果不能寫在HTML內(nèi)容的后面，則需要在頁面加載完成后再初始化。

<script type="text/javascript">
window.onload = function() {
 ...
}
</script>
或者這樣（jQuery和Zepto）
<script type="text/javascript">
$(document).ready(function () {
 ...
})
</script>

以上所述是小編給大家介紹的非常優(yōu)秀的JS圖片輪播插件Swiper，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論