Mobile Touch Slide Plugin Swiper

Source: Internet
Author: User
Tags min prev time interval touch wrapper
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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.