Author: | mystroken |
---|---|
Views Total: | 12,546 views |
Official Page: | Go to website |
Last Update: | March 30, 2019 |
License: | MIT |
Preview:

Description:
drag.js is a vanilla JavaScript library which implements the smooth drag/swipe to slide with inertial scrolling effect on a group of slidable elements.
Ideal for creating a cross-platform slider/scroller where the users are able to slide through slides with mouse drag and/or touch swipe events.
How to use it:
Install and import the drag.
# NPM $ npm install @mystroken/drag --save
import Drag from '@mystroken/drag';
Add scrollable slides to the slider.
<div class="slider"> <div class="slider__items"> <div class="slider__item"></div> <div class="slider__item"></div> <div class="slider__item"></div> <div class="slider__item"></div> <div class="slider__item"></div> <div class="slider__item"></div> <div class="slider__item"></div> <div class="slider__item"></div> </div> <div class="cursor"></div> </div>
Initialize the library and done.
const container = document.querySelector('.slider'); const options = { listener: container, multiplier: 1 // default: 1 }; const drag = new Drag(options);
Get the current position on move.
drag.on(event => { currentX = event.X; currentY = event.Y; });