Mobile Touch Slide Plugin Swiper

Mobile Touch Slide plugin Swiper04/02/2015

First, understand Swiper

Currently mobile projects are generally required to have the effect of touch-screen focus graph, if you also need to implement this function, Swiper is a good choice.

1. He does not need to load any public libraries (such as jquery) to run, which guarantees the swiper and speed of operation. Swiper can also be safely moved in environments where public libraries are loaded, such as Jquery,zepto,jquery Moblie.

2, swiper The default touch ratio is 1:1, you can modify the Swiper settings to change this ratio.

3, Swiper added option to open Mutation Observer, with this feature swiper can automatically re-initialize and calculate the required elements when you dynamically change the style of Dom or Swiper.

4. Swiper has a rich API that allows you to create your own unique pager, navigation, parallax scrolling, or other wonderful effects.

5. Swiper is the only sliding plug-in that supports 100%RTL layouts.

6, Swiper allows multi-line slides layout, so that each line of slide will be less.

7. Added three new transition effects: Fade in, 3D block, 3D stream.

8, now swiper can be used to control other swiper, even can control at the same time.

9, Swiper with all common navigation controller, including pager, toggle arrow, scroll bar.

10, Swiper Use the popular Flexbox layout, this solves a lot of computational size problems. This layout also allows CSS to be used to set slides.

11. You can set the display of slide at Swiper initialization, including each row, column, number of each group and their spacing.

12, Swiper support popular parallax scrolling effect, this effect can be applied to any element in Swiper, picture, text block, title, background and so on.

13, Swiper lazy loading delayed the inactive/invisible picture loading, the user swipe to load them. This feature allows the page to load faster and improve the performance of Swiper.

14. Swiper3 also includes all Swiper2 functions, including adaptive, rolling bounce, resistance bounce, loop mode, nested Swiper.

Ii. Methods of Use

1. First load the plugin, Swiper prepared the basic test package for you to use, the test package contains the Swiper.min.js and swiper.min.css files.

<! DOCTYPE html>

...

<link rel= "stylesheet" href= "Path/to/swiper.min.css" >

...

<script src= "Path/to/swiper.min.js" ></script></body>

If your page is loaded with jquery.js or zepto.js, you can choose to use a lighter swiper.jquery.min.js.

<! DOCTYPE html>

...

<link rel= "stylesheet" href= "Path/to/swiper.min.css" >

...

<script src= "Path/to/jquery.js" ></script>

<script src= "Path/to/swiper.jquery.min.js" ></script></body>

2.HTML content.

<div class= "Swiper-container" >

<div class= "Swiper-wrapper" >

<div class= "Swiper-slide" >slide 1</div>

<div class= "Swiper-slide" >slide 2</div>

<div class= "Swiper-slide" >slide 3</div>

</div>

<!– If a paging device is required –>

<div class= "Swiper-pagination" ></div>

<!– If you need a navigation button –>

<div class= "Swiper-button-prev" ></div>

<div class= "Swiper-button-next" ></div>

<!– If a scroll bar is required –>

<div class= "Swiper-scrollbar" ></div></div>

3. You may want to define a size for swiper.

. swiper-container {

width:600px;

height:300px;}

4. Initialize Swiper: Preferably next to </body> tag

<script>

var myswiper = new Swiper ('. Swiper-container ', {

Direction: ' Vertical ',

Loop:true,

If you need a page splitter

Pagination: '. Swiper-pagination ',

If you need to forward the back button

Nextbutton: '. Swiper-button-next ',

Prevbutton: '. Swiper-button-prev ',

If a scroll bar is required

ScrollBar: '. Swiper-scrollbar ',

})

</script></body>

If it cannot be written behind the HTML content, it needs to be initialized after the page is loaded.

<script type= "Text/javascript" >

Window.onload = function () {

...

}

</script>

Or so (jquery and Zepto)

<script type= "Text/javascript" >

$ (document). Ready (function () {

...

})

</script>

Third, API

Parameter	Type	Default	Description
Initialslide	Number	0	Index of the initial slide
Direction	String	' Horizontal '	can be ' horizontal ' or ' vertical ' (vertical slide)
Speed	Number	300	Sliding speed (unit ms)
Setwrappersize	Boolean	False	Opening this setting adds a width equal to slides added on wrapper, which may be needed in browsers where support for flexbox layouts is not good.
Virtualtranslate	Boolean	False	Virtual displacement. When you enable this parameter, Swiper does not move outside of the rest as usual, but does not set the displacement on the wrapper. When you want to customize some slide switch effects can be used. For example, we provide the cube switch effect, when the slide switch, the position of the wrapper is fixed.
Autoplay (Automatic switching)
AutoPlay	Number	-	Automatically switch the time interval (in MS), do not set this parameter slide does not automatically switch.
Autoplaydisableoninteraction	Boolean	True	If set to False, automatic switchover does not stop after user action Swiper, and AutoPlay is restarted each time.
Progress (Progress)
Watchslidesprogress	Boolean	False	Turn on this parameter to calculate the progress of each slide (progress)
Watchslidesvisibility	Boolean	False	You must first turn on watchslidesprogress to turn on watchslidesvisibility, then add a classname to each visible slide
Freemode (Free mode)
Freemode	Boolean	False	When set to True, the free mode is turned on, that is, the slide stop stops at the current position instead of the current frame position.
Freemodemomentum	Boolean	True	When set to True, the slide releases the slide and then continues to slide by momentum, which, when false, stops immediately after release.
Freemodemomentumratio	Number	1	The larger the value set, the greater the sliding distance when the slide is released.
Freemodemomentumbounce	Boolean	True	False when the momentum bounce in free mode is disabled, the slides does not bounce when it slides to the edge by inertia.
Freemodemomentumbounceratio	Number	1	The larger the value, the more obvious the rebound effect is, and the greater the bounce distance.
Effects (toggle effect)
Effect	String	' Slide '	Can be set to "slide" (Displacement toggle) "Fade" (Fade in) "Cube" (Block) "Coverflow" (3d Stream).
Fade	Object	Fade: { Crossfade:false}	Fade effect Parameters
Cube	Object	Cube: { Slideshadows:true, Shadow:true, SHADOWOFFSET:20, shadowscale:0.94}	Cube effect Parameters
Coverflow	Object	Coverflow: { ROTATE:50, stretch:0, DEPTH:100, Modifier:1, Slideshadows:true}	Coverflow Effect Parameters
Parallax (Parallax effect)
Parallax	Boolean	False	Turn on parallax effects
Slides grid (grid distribution)
Spacebetween	Number	0	Distance between slide (unit px)