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>