Arrastre suave/deslizar para desplazarse por la biblioteca de JavaScript-Drag. js
| Autor: | mystroken |
|---|---|
| Views Total: | 121 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 30, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Drag. js es una biblioteca de JavaScript vainilla que implementa el arrastre suave/deslizar para deslizar con efecto de desplazamiento inercial en un grupo de elementos deslizables.
Ideal para crear un deslizador/desplazador multiplataforma donde los usuarios pueden deslizarse a través de diapositivas con arrastrar el ratón y/o tocar eventos de deslizamiento.
Funcionamiento
Instale e importe el arrastre.
# NPM $ npm install @mystroken/drag --save
import Drag from '@mystroken/drag';
Agregue diapositivas desplazables al control deslizante.
<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>
Inicializar la biblioteca y listo.
const container = document.querySelector('.slider');
const options = {
listener: container,
multiplier: 1 // default: 1
};
const drag = new Drag(options); Obtener la posición actual en movimiento.
drag.on(event => {
currentX = event.X;
currentY = event.Y;
});
