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) |