Smooth Drag/Swipe To Scroll JavaScript Library – drag.js

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;
});