簡介

• swiper是一個免費的輕量級的，主要處理移動設備 觸控滑塊 的js框架，主要是為iOS設計的，但是在安卓，wp和pc端也有良好的用戶體驗。

特點

• 1、輕量級，簡潔高效；
• 2、橫跨多種設備iOS、安卓、wp、pc；
• 3、多種版本支持（原生，jQuery，zepto）。

注意

• swiper現在已經發展到3.x系列，最新的版本已經不再全面支持PC端的瀏覽器，如果要更好地兼容性，需要使用2.x版本（IE7+）。

使用

• 1、引入文件

<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>

• 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>

• 3、Js文件調用

var swiper = new Swiper('.swiper-container');

注意：html的結構不能隨意進行修改，標簽的類名也不能修改，如果要修改，那么需要單獨添加類名進行控制！！！

高級使用方式

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 class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 如果需要滾動條 -->
    <div class="swiper-scrollbar"></div>
</div>

** 對應的js參數 **

var mySwiper = new Swiper('.swiper-container',{
    // 如果需要分頁器
      pagination: '.swiper-pagination',
    // 如果需要前進后退按鈕
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
    // 如果需要滾動條
      scrollbar: '.swiper-scrollbar'
});

注意：需要什么參數就添加對應的HTML和配置文件中的“開關”屬性。

常用功能參數

• loop: true, // 循環開關
• autoplay: 3000, // 自動播放間隔時間（單位：毫秒）默認不自動播放
• direction: 'vertical', // 切換放向 水平（horizontal）或垂直（vertical）
• speed: 300, // 切換速度（單位：毫秒）
• keyboardControl: true, // 鍵盤控制開關
• paginationType: 'bullets', // 分頁器外觀 bullets、fraction、progress
• effect: 'fade', // 切換效果 fade、cube、coverflow、flip
• ......

官網

http://www.swiper.com.cn/

參數文檔

http://www.swiper.com.cn/api/index.html

【swiper animate】△△△

• 簡介：swiper animate是swiper中文網提供的用于在swiper內快速制作CSS3動畫效果的小插件，適用于Swiper2.x和Swiper3.x。
• 1、引入文件(比之前多了animate.css 和swiper.animate.js)

<link rel="stylesheet" href=“css/swiper.min.css">
 <link rel="stylesheet" href=“css/animate.min.css">    
 <script src=“js/swiper.min.js"></script>
 <script src=“js/swiper.animate.min.js"></script>

• 2、HTML

 <div class="swiper-container">
   <div class="swiper-wrapper">
     <div class="swiper-slide">
        <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">Slider 1</p>
     </div>
   </div>
 </div>

注意：在需要運動的元素上面增加類名 ani, 然后添加swiper animate 參數。

標簽屬性:

Swiper-animate-effect      動畫效果
swiper-animate-duration  動畫持續時間（一定要帶單位）
swiper-animate-delay      動畫延遲時間（一定要帶單位）

• 3、js調用：

var mySwiper = new Swiper ('.swiper-container', {
      onInit: function(swiper){               //Swiper2.x的初始化是onFirstInit
        swiperAnimateCache(swiper);  //隱藏動畫元素
        swiperAnimate(swiper);            //初始化完成開始動畫
      },
      onSlideChangeEnd: function(swiper){
        swiperAnimate(swiper);           //每個slide切換結束時也運行當前slide動畫
      }
 })