swiper，animate使用方法

 

一、先連接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> 

 

二、初始化

/* 初始化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動畫
        } 
})

 

 

四、使用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: 0;}
}
.shutter2{
    -webkit-animation: shutter2 0.5s forwards;
    animation: shutter2 0.5s forwards;
}

 

 

API地址： http://www.swiper.com.cn/api/start/2014/1218/140.html