Swiper.js Using Tutorials

Last week, through the production company product Introduction Popup box process, using a strong swiper.js, official website address: (http://www.swiper.com.cn/).

First, Swiper.js Introduction:

Swiper (formerly known as Swiper Master) is a free and lightweight JS framework for mobile device touch sliders, using hardware-accelerated transitions, if supported by the device. Primarily used with mobile sites, Web applications (Web apps), and native applications (native apps). Designed primarily for iOS, it also has a good user experience on Android, WP8 Systems, and PC-side browsers.

Swiper commonly used for mobile website content Touch swipe

Swiper is a pure JavaScript-based sliding effect plugin for mobile devices such as mobile phones and tablets.

Swiper can realize touch screen focus map, touch screen tab switch, touch screen multi-graph switch and other common effects.

swiper Open source, free, stable, easy to use, powerful, is an important choice of Architecture Mobile Terminal website!

More introduction can go to the official website address: http://www.swiper.com.cn/view.

can also be poked here to view demo:http://www.swiper.com.cn/demo/index.html#

Second, the version difference of Swiper.js

1, Swiper.js 3.x version. Its main applications are mobile phones, apps, WebApp and other mobile terminals. Swiper.js version 3.0 uses a lot of new features of HTML5 and CSS3, so the browser compatibility with PC is not very good, especially ie. Below IE9 (IE10 has not been tested), swiper.js is almost equal to no use, no effect at all. So the Swiper.js 3.0 is best for mobile.

2, Swiper.js 2.x version. Swiper.js 2.x version of the browser compatibility with the PC side is better, and even support IE7. The sliding effect in the IE8 can be perfectly run.

Concrete Look demo:http://swiper2.swiper.com.cn/demo/index.html

Three, swiper.js interesting function

1, use the process, feel swiper.js can integrate powerful CSS3 animation effect plug-in: animate.css, details please poke: http://daneden.github.io/animate.css/. Swiper.js combined with ANIMATE.CSS can achieve powerful animation effects, almost omnipotent. If you are not satisfied with the animated effect of ANIMATE.CSS, you can completely add your own animations, which is simply fantastic.

A detailed tutorial on ANIMATE.CSS has been written in very detailed, here is not cumbersome to repeat, direct reprint address:

Introduction to CSS3 animation and the use of animation library Animate.css

Swiper.js Using Tutorials