And pageSwitch.js Difference of
The applicable scenario of pageSwitch.js is full screen switching, that is, all screens are one screen. On this basis, more than 100 switching effects have been achieved. TouchSlider.js, on the other hand, focuses on the sliding effect. It not only supports full screen switching, but also supports slide switching without fixed size.
Please refer to the examples provided by each component for specific use.
.my-slider-container { touch-action : pan-y ; // When rolling horizontally or
touch-action : pan-x ; // When sliding longitudinally } npm install touchslider //If you use a build tool such as webpack, requirejs, or browserify, you can do this:
var TouchSlider = require ( 'touchslider' ) ;
//You can also download this file directly and import it directly on the page
var ts = new TouchSlider ( 'container id' , {
duration : six hundred , //Int page transition time
direction : one , //Int page switching direction, 0 horizontal, 1 vertical
start : zero , //Int default display page
align : 'center' , //String alignment, left (top) center (middle) right (bottom)
mouse : true , //Bool Enable Mouse Drag
mousewheel : false , //Bool Enable Mouse Wheel Switching
arrowkey : false , //Whether bool enables keyboard direction switching
fullsize : true , //Whether bool is a full screen slide (false means free size slide)
autoplay : true , //Whether bool automatically plays slide show
interval : int //Bool Slide Play Interval
} ) ;
//Call method
ts . prev ( ) ; //Previous
ts . next ( ) ; //Next
ts . slide ( n ) ; //Sheet n
ts . play ( ) ; //Play Slide
ts . pause ( ) ; //Pause Slide
ts . prepend ( DOM_NODE ) ; //Front added page
ts . append ( DOM_NODE ) ; //Additional page
ts . insertBefore ( DOM_NODE , index ) ; //Add before index
ts . insertAfter ( DOM_NODE , index ) ; //Add after index
ts . remove ( index ) ; //Delete page index
ts . isStatic ( ) ; //Static state or not
ts . destroy ( ) ; //Destroy TouchSlider Effect Object
/*Event Binding
*Optional values of event:
*
*Before page switching
*After page switching
*DragStart starts dragging
*DragMove dragging
*DragEnd End Drag
*/
ts . on ( event , callback ) ;