swiper animate

製作h5全屏動畫切換時可以使用swiper，同時需要爲頁面的內容添加動畫可以使用swiper animate插件。
swiper animate中文教程
下載Swiper

---

1、 需要加載swiper.aniamte.min.js和animate.min.css。

2、初始化swiper：

 var mySwiper = new Swiper ('.swiper-container', {
    direction : "vertical",
    mousewheelControl : false,
    effect : "fade",
    noSwiping : true,

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

3、在需要添加動畫的元素上添加類名 ani 。

<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">內容</p>
</div>

swiper-animate-effect：切換效果，例如 fadeInUp
swiper-animate-duration：可選，動畫持續時間（單位秒），例如 0.5s
swiper-animate-delay：可選，動畫延遲時間（單位秒），例如 0.3s

---

swiper常用到的其他方法

API文檔
1、noSwing（禁止切換）
設爲true時，可以在slide上（或其他元素）增加類名’swiper-no-swiping’，使該slide無法拖動。
該類名可通過noSwipingClass修改。

使用實例：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            slider1</div>
        <div class="swiper-slide stop-swiping">
            slider2</div>
        <div class="swiper-slide">
            slider3</div>
    </div>
</div>
<script> 
var mySwiper = new Swiper('.swiper-container',{
noSwiping : true,
noSwipingClass : 'stop-swiping',//自定義禁止切換的swiper的類名
})
</script>

使用情況：
所製作的h5需要用戶進行一定的交互操作才能切換到下個頁面，比如選擇題勾選到某一個答案之後滑動到下一個頁面。（可添加計時器對頁面切換進行一定的延時。）

2、mySwiper.slidePrev();（滑動到前一個頁面） ；mySwiper.slideNext();（滑動到下一個頁面）

<script> 
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
mySwiper.slidePrev();
})
$('#btn2').click(function(){
mySwiper.slideNext();
})
</script>

3、mySwiper.slideTo()；（滑動到指定頁面）

<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn').click(function(){
mySwiper.slideTo(0, 1000, false);//切換到第一個slide，速度爲1秒
})
</script>