SWIPE js– Mobile Web page content Touch Sliding class Library

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, this mobile device is a very common effect, its user experience far more than click a button area, Touch through the fingers is also a feature of mobile devices, we must 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, support the precise touch movement operation, but also can set the function of automatic play, proportional zoom and so on practicality.

Swipe function Introduction

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

Startslide:4,  //Start Picture Toggle index Position auto:3000,//Set auto switch time, Unit Ms Continuous:true,  ///infinite loop picture toggle effect Disablescroll:true,  //Stop scrolling the screen due to touch stoppropagation:false,//  Stop sliding event callback:function (index, Element) {},  //callback function, Switch to trigger transitionend:function (index, Element) {}  //callback function, switch 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.

Purely record role, want to use the students themselves under the Baidu Bar.