Mobile Terminal slide plug-in Swipe tutorial, slide plug-in swipe tutorial

Mobile Terminal slide plug-in Swipe tutorial, slide plug-in swipe tutorial

Preface

Recently, a new "activity platform" needs to be developed, and a slide is required for the mobile homepage. Because not all the pages are hand-written for a while, I found a new slide plug-in. After all, there is no need to duplicate the wheel.

After comprehensive comparison, we found that the Swipe plug-in is still quite good. Therefore, I wrote an article here to recommend it as a record for your convenience.

Introduction

Swipe is a lightweight mobile slide component, which is not hard to see from the file size. It supports touch movement, resistance and anti-skid. Simply using the mobile terminal should meet basic requirements.

Description

After downloading from github, you can find that there are 8 files in total, which may be used in real projects, that is, basically one swipe. js file.
Index.html and style.css exist as demos. If you are interested, you can study them.

What if we use it? The code below is simple:

<! DOCTYPE html> 
The code execution result is as follows:
 
Click or move your mouse over your phone and slide your finger to see the running effect of the slide. Of course, the current is only the most basic, all of which are default configurations. We can use the parameters provided below to customize better results based on our own needs.
StartSlide Integer (default: 0)-index position Swipe shoshould start at (sliding index value, that is, moving from * value, default value is 0)
Speed Integer (default: 300)-speed of prev and next transitions in milliseconds. (Sliding speed, default value: 300 ms)
Auto Integer-begin with auto slideshow (time in milliseconds between slides) (automatic slide, in milliseconds)
Continuous Boolean (default: true)-create an infinite feel with no endpoints (whether to slide cyclically, the default value is true)
DisableScroll Boolean (default: false)-stop any touches on this container from scrolling the page (stop any scrolling pages that touch this container, default flase)
StopPropagation Boolean (default: false)-stop event propagation (stop event propagation, default value: flase)
Callback Function-runs at slide change. (callback Function)
TransitionEnd Function-runs at the end slide transition. (the Function called during sliding transition)

The following is an official Demo:
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) {}});
It is not difficult to see the usage and location of specific parameters. If you are interested in this one, you can add the parameters as needed. All of them are based on the second parameter of the json object that exists in Swipe.
In addition to the above parameters, Swipe also provides some common methods (APIS ):
Prev () slide to prev (Previous Page)
Next () slide to next (next page)
GetPos () returns current slide index position (get the current index position)
GetNumSlides () returns the total amount of slides (get the total number of all slide)
Slide (index, duration) slide to set index position (duration: speed of transition in milliseconds) (index, duration) slide to set the index position (duration: transformation Speed in milliseconds)

Are some simple interface methods, you can call them in Js to achieve the desired effect.
: Https://github.com/thebird/swipe/