Mobile Development (iv): Swiper.js

Swiper.js Chinese web: http://www.swiper.com.cn/

Document structure

Swiper.jquery.js is required to reference jquery.js or zepto.js, simply refer to the file directly and reduce the load.

Swiper.animate.js using the Animate.js animation effect, using the method: http://www.swiper.com.cn/usage/animate/index.html

Basic Use Method

Specific operation: http://www.swiper.com.cn/usage/index.html

1. Write basic HTML tag structure, using swiper.js classname in the structure;

2. When writing JS, a function can be called directly, but the premise must be that the HTML tag with the function exists in the page;

3. Use the Swiper.js style to apply the SWIPER.CSS

API swiper.js version 3.0+

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

1. Initialization

var New Swiper ('. Swiper-contain', {   //})

2. Basic (Swiper General Options)

Mainly includes: initial setting, sliding direction, speed, auto play, parallax effect, the size application of hidden display.

3. Progress (Progress)

Index that identifies Silde

4. Free mode/resistance bounce

Whether to achieve automatic fit, the various effects during the fit

5. Slide Grid (grid distribution)

Properties Property

Mobile Development (iv): Swiper.js