Mobile Content Slider JS Library swipe.js

Swipe.js is a lightweight mobile content slider, similar to the PC-side slide.js, for implementing carousel ads or other content sliding modules that support mobile screen swipe gesture operations. This library is not dependent on any other JS libraries and can be used independently

When using Swipe.js, simply refer the downloaded file to the page and write the corresponding structure in the page.

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

This requires a two-layer div inside, the content of the inner div is self-defined, and when calling the swipe method, the outer div is passed into the method

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

Use swipe to add some styles to your CSS file

1 . Swipe{2 Overflow:Hidden;3 Visibility:Hidden;4 position:relative;5}6 . Swipe-wrap{7 Overflow:Hidden;8 position:relative;9}Ten . swipe-wrap > Div{ One float: Left; A width:100%; - position:relative; -}

Example of calling Swipe

New Swipe (document.getElementById (' Slider '), {  2,       true ,   false ,   false ,   function (index, elem) {},   function (index, Elem) {}});

The properties of the swipe are expressed separately

startslide--Integer, default 0, indicating the index position of the content block in the parent element where the slider starts to slide

speed--milliseconds, default 300, indicating the time (in milliseconds) that the front and rear slider transitions have completed

auto--number of milliseconds, indicating the playback time of the AutoPlay stop (from switch to current frame to start toggle Next frame)

continuous--Boolean value that indicates whether the slider is looped back

stoppropagation--default False to prevent event bubbling

disablescroll--default False when scrolling the page, stop listening for touch events on the slider

Callback--function called when the slide changes

Transitionend--function called when the slide switch is complete

Swipe API

Some ways to increase the control of sliding blocks

prev()Slide to the previous one

next()Slide to the next one

getPos()Returns the index value of the current sliding page

getNumSlides()Returns the total number of pages in a slider

slide(index, duration)Swipe to the page that specifies index, duration represents the sliding speed

Browser support

Swipe is compatible with all browsers (ie7+) and is especially suitable for browsers that support transform and transition CSS3 properties, but they are not supported or can be used. Data from Https://github.com/thebird/Swipe