Swipe.js easy to achieve mobile phone-side sliding effect

Plugins

Official website: http://www.swipejs.com
Github:https://github.com/bradbirdsall/swipe

Plugin features

Swipe.js is a relatively well-known touch slide plugin that handles content slippage, supports custom options, lets it scroll automatically, controls scrolling intervals, returns callback functions, and more. Often visible for use in mobile development

How to use

The HTML code is as follows:

<DivID= ' Slider 'class= ' swipe '>  <Divclass= ' Swipe-wrap '>    <Div></Div>    <Div></Div>    <Div></Div>  </Div></Div>

The CSS code is as follows:

 .swipe  { overflow :  hidden ;  visibility :  hidden ;  position :  relative ;} .swipe-wrap  { overflow :  hidden ;  position :  relative ;} .swipe-wrap > Div  { float : left ; : 100% ;  position :  relative ;} 

JS Code:

Window.myswipe = Swipe (document.getElementById (' Slider '));

Example

Window.myswipe = new Swipe (document.getElementById (' slider '), {  startslide:2,  speed:400,  auto:3000,  continuous:true,  disablescroll:false,  stoppropagation:false,  callback:function (index, elem) { },  transitionend:function (index, Elem) {}});

Setting Options

• Startslide Integer (default:0) -Where to start scrolling
• Speed Integer (default:300) -Interval of animation scrolling (seconds)
• Auto Integer-Start automatic slide (the time between slides in milliseconds)
• Continuous Boolean (default:true) -Creates an infinite loop (whether to loop when sliding to the end of all animations)
• Disablescroll Boolean (default:false) -whether to stop slide scrolling when scrolling the scroll bar
• Stoppropagation Boolean (default:false) -whether to stop event bubbling
• callback function-callback functions in a slide run
• Transitionend function-Callback for the end of the animation run

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

Related up and down sliding plug-ins:

Iscroll.js

Swipe.js easy to achieve mobile phone-side sliding effect