How to create CSS3 animation effects using Swiper

This article mainly introduces you to the relevant information on how to create CSS3 animation effects in Swiper. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it Let’s learn with the editor below.

Preface

Swiper is a free and lightweight touch slider framework for mobile devices that uses hardware-accelerated transitions (if if supported by the device). Mainly used with mobile websites, web applications (web apps), and native applications (native apps). It is mainly designed for IOS. At the same time, it also has a good user experience on Android, WP8 systems and modern desktop browsers.

This article mainly introduces to you the relevant content about creating CSS3 animation effects in Swiper, and shares it for your reference and study. I won’t say much below, let’s take a look at the detailed introduction.

1. Introduce the following file versions into the page where animation needs to be added.

<script src="../js/swiper.min.js"></script>
<script src="../js/swiper.animate.min.js"></script>
//**这里引入jquery或者zepto.js都可以**//
<script src="../js/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="../css/animate.min.css" rel="external nofollow" >

2. Then add it to the js part of the page (according to business needs)

var mySwiper = new Swiper('.swiper-container',{
   autoplay : 5000,//自动切换时间
   pagination : '.swiper-pagination',
   //pagination : '#swiper-pagination1',
   onInit: function(swiper) {//轮播初始化时候执行动画
    swiperAnimateCache(swiper);
    swiperAnimate(swiper);
   },  
   onSlideChangeEnd: function(swiper) {//轮播切换到最后一张的时候重新执行
    swiperAnimate(swiper);
   }
  })

3 , add class:

to the element that needs to be animated. Add class ("ani", "animated") to the element that needs to be animated.

Then you can add the provided in animate.css Some animations

If the animations in animate.css cannot meet the needs, you can also customize some animations

Directly add custom animation styles in the css corresponding to the elements that perform animation

You can also configure several parameters on the element

swiper-animate-effect: switching effect, such as fadeInUp

swiper-animate-duration: optional, animation duration (unit seconds), such as 0.5s

swiper-animate-delay: optional, animation delay time (in seconds), such as 0.3s

4. The following is a case

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement switching arrow buttons in the swiper plug-in

How to use the swiper mobile carousel plug-in

How to use Bus in Vue component communication

How to use Swiper to implement page image carousel

In How to realize the automatic increase of numerical value in JavaScript

How to use Swiper to realize the use of paginator

The above is the detailed content of How to create CSS3 animation effects using Swiper. For more information, please follow other related articles on the PHP Chinese website!