Swiper,animate How to use

1. Link css and JS files first

<Linkrel= "stylesheet"type= "Text/css"href= "Css/swiper-3.3.1.min.css"/><Linkrel= "stylesheet"type= "Text/css"href= "Css/animate.min.css"/>        <Scripttype= "Text/javascript"src= "Js/swiper-3.3.1.min.js"></Script><Scripttype= "Text/javascript"src= "Js/swiper.animate1.0.2.min.js"></Script> 

2. Initialization

/*Initialize Swiper.js*/varMyswiper =NewSwiper ('. Swiper-container '), {pagination:'. Swiper-pagination ',//Page SplitterDirection: ' Vertical ',//page Change verticallySlidetoclickedslide:true,//Slide1 to Slide2 swipe in the process of light slide1 will return to Slide1                /*Initialize animate*/OnInit:function(Swiper) {//the initialization of the swiper2.x is OnfirstinitSwiperanimatecache (Swiper);//Hide animated elementsSetTimeout (function(){//start the animation after 2s (the mobile side always starts to animate without loading the picture ...). )Swiperanimate (Swiper);//initialization complete Start animation            },2000)}, Onslidechangeend:function(Swiper) {swiperanimate (swiper);//The current slide animation is also run at the end of each slide switch        } })

4, use animate animation, notice the class to add "ANI"

<class= "ani pic"  src= "pic.jpg"   Swiper-animate-effect= "ZoomIn"  swiper-animate-duration= "0.7s"/>

Custom animation effects:

Add class= "ANI" and swiper-animate-effect= "animated names" to the HTML to run animations on each switch, just like animate comes with.

<class= "ani pic"  src= "pic.jpg"   Swiper-animate-effect= "Shutter2"/>

Define effects in CSS

@-webkit-keyframes Shutter2 {    from{top: 100%;}     to {top: 0;} }.shutter2{    -webkit-animation: shutter2 0.5s forwards;     Animation: shutter2 0.5s forwards;}

API Address: http://www.swiper.com.cn/api/start/2014/1218/140.html

Swiper,animate How to use