Biblioteca por secuencia de imágenes con función táctil en JavaScript puro-Deslider
| Autor: | kevguy |
|---|---|
| Views Total: | 1,921 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 26, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Deslider es un plugin de JS por secuencia ligero y dinámico que genera un deslizador de bucle infinito responsive, amigable para el móvil y de un objeto de imagen. Admite eventos de arrastre del mouse y de deslizamiento táctil (basados en Hammer. js).
Funcionamiento
Importa el JavaScript y la hoja de estilos del Deslider en la Página Web.
<link href="css/style.css" rel="stylesheet"> <script src="src/Deslider.min.js"></script>
Cree un contenedor vacío en el que desee colocar el carrusel.
<div id="demo"> </div>
Cree un objeto de datos que contenga imágenes que desee presentar.
var imgList = [ "1.jpg", "2.jpg", "3.jpg" ];
Cree un nuevo objeto y especifique los orígenes de imagen & contenedor de destino.
new Deslider(imgList, '#demo');
Posibles opciones de carrusel:
slideshow = new Deslider(imgObj, '#demo',{
// auto play
auto: {
speed: 3000,
pauseOnHover: true,
},
// shows a fullscreen mode button
fullScreen: true,
// enables touch swipe
swipe: true,
// enables pagination
pagination: true,
// enables infinite loop
repeat: true
});
