Swipe js– Mobile Web page content Touch Sliding class Library

http://www.jiawin.com/swipe-mobile-touch-slider/

Presumably do mobile front-end students will often receive such a demand, that is, on the mobile device page banner map can touch the left and right or up and down the sliding switch, which is a very common effect in mobile devices, its user experience Far more than clicking a button area, the touch operation via the finger is also a feature of the mobile device, we have to specialize in processing, haha. In fact, the implementation of the principle is very simple, but the normal development of their own is not very convenient.

Today is to bring you a lightweight JS touch sliding class library –swipe JS. This is a very small JavaScript class library, but his function is not simple, it can be used to display any content on the Web page, to support the precise touch movement operation, You can also set the functions of auto-play, proportional scaling and so on.

Swipe function Introduction

below for you to introduce the use of swipe JS method, swipe has the following parameters:

Startslide:4,  //start  Image Switch index position  Auto: 3000,//Set automatic switching time, unit millisecond continuous:true,  // Infinite loop picture Toggle effect Disablescroll:true,  //block scrolling screen stoppropagation:false due to touch,//  Stop sliding event callback:function (index, Element) {},  //callback function, toggle to trigger transitionend:function (index, Element) {}  //callback function, toggle end to call the function. 

In addition, there are some more API methods to use, such as:

• Prev (): prev
• Next (): Next page
• GetPos (): Gets the index of the current page
• Getnumslides (): Gets the number of all items
• Slide (Index, duration): Sliding method

Swipe how to use

After understanding the basic function methods, let's look at how to use them.

The first is the HTML structure:

<div id= "Slider" class= "swipe" >  <div class= "Swipe-wrap" >    <div></div>    <div ></div>    <div></div>  </div></div>

Then the style code:

. swipe {overflow:hidden;visibility:hidden;position:relative;}. swipe-wrap {overflow:hidden;position:relative;}. Swipe-wrap > Figure {float:left;width:100%;p osition:relative;}

Finally set the JS binding and parameter settings:

The var slider = Swipe (document.getElementById (' slider '), {   ...   ............});

Here, as long as the function parameters described above are written in, you can achieve the corresponding function.

Finally, we can also add the up and down buttons to the swipe toggle :

<button onclick= "Swipe.prev ()" >prev</button><button onclick= "Swipe.next ()" >next</button>

Here we have finished the picture sliding effect, is not very convenient and fast? Let's try it.

Swipe js– Mobile Web page content Touch Sliding class Library