Biblioteca de imágenes por secuencia táctil-JS-carrusel

Vista prévia

Descripción

Un carrusel de imágenes sensible y táctil implementado en JavaScript vainilla.

Los usuarios son capaces de cambiar entre imágenes con arrastrar el ratón y tocar los eventos de deslizamiento.

Funcionamiento

Instale el JS-Carousel con NPM:

# NPM
$ npm install js-carousel --save

Importa el JS-Carousel.

// ES6
import jscarousel from 'js-carousel';

<!-- Or -->
<script src="https://www.unpkg.com/[email protected]/lib/index.min.js"></script>

Agregue una serie de imágenes al contenedor de carrusel.

<div id="carousel-container">

<img src="1.jpg">

<img src="2.jpg">

<img src="3.jpg">

...
</div>

Habilite el carrusel y listo.

jscarousel(document.getElementById('carousel-container'), {

// options here
});

Personaliza la velocidad de la animación y el intervalo de reproducción automática.

jscarousel(document.getElementById('carousel-container'), {

animationSpeed: 500,

itemDuration: 1500
});

Establezca la distancia que el usuario debe deslizar antes de que se considere un deslizamiento.

jscarousel(document.getElementById('carousel-container'), {

swipeThreshold: 150
});

Detenga el carrusel cuando quiera.

stop()

Registro de cambios

v1.3.7 (11/10/2018)

• utiliza setAttribute para establecer la propiedad de estilo;

v1.3.6 (11/03/2018)

• no uses translateX

v1.3.4 (10/27/2018)

• funcionalidad de detención añadida

v1.2.4 (10/12/2018)

• más optimización del rendimiento;