How to create CSS3 animation effects in Swiper

Below is a reference link

• Introduce the following file versions to the page where you want to add animation

<script src=".. /js/swiper.min.js"></script>
<script src=".. /js/swiper.animate.min.js"></script> //** here is jquery or zepto.js **/ <script SRC =".. / js/jquery - 1.9.1. Js. ""></script>
<link rel="stylesheet" href=".. /css/animate.min.css">Copy the code

• Then add (as required by business) to the JS section of the page

var mySwiper = new Swiper('.swiper-container',{autoplay: 5000,//'.swiper-pagination',
          //pagination : '#swiper-pagination1',
          onInit: function(swiper) {swiperAnimateCache(swiper); swiperAnimate(swiper); }, onSlideChangeEnd:function(swiper) {// Perform swiperAnimate(swiper) after animate (swiper); }})Copy the code

• Add class to the element of the animation you want to execute:

Add class () to the element that you want to animate."ani","animated"You can then add animations provided in the animate. CSS if the animate. CSS does not meet your requirements, you can also customize some animations by adding a custom animation style to the CSS of the element executing the animation Swiper-animate -duration: Optional, animation duration (in seconds), for example, 0.5s swiper-animate-delay: Optional, animation delay time in seconds, for example, 0.3sCopy the code

• Here’s an example