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

Category: Javascript , Slider | March 30, 2019
Author: mystroken
Views Total: 480
Official Page: Go to website
Last Update: March 30, 2019
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply