1、先链接css和js文件
<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/> <script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
<script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script>
2、初始化
/* 初始化swiper.js */
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination', //分页器
direction:'vertical', //垂直方向换页
slideToClickedSlide: true, //slide1向slide2 swipe的过程中轻点slide1会回到slide1 /* 初始化animate */
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
setTimeout(function(){ //2s后开始运行动画（移动端总是没加载完图片就开始动画了。。。。。）
swiperAnimate(swiper); //初始化完成开始动画
},2000)
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
4、使用animate的动画，注意class中要加“ani”
<img class="ani pic" src="pic.jpg" swiper-animate-effect="zoomIn" swiper-animate-duration="0.7s" />
自定义的动画效果：
html中添加class=“ani” 和swiper-animate-effect=“动画名”，可以与animate自带的动画一样，在每次切换时运行动画。
<img class="ani pic" src="pic.jpg" swiper-animate-effect="shutter2" />
css中定义效果
@-webkit-keyframes shutter2{
from{top: 100%;}
to{top:;}
}
.shutter2{
-webkit-animation: shutter2 0.5s forwards;
animation: shutter2 0.5s forwards;
}API地址： http://www.swiper.com.cn/api/start/2014/1218/140.html