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>