Deslizador de secuencia de imágenes de JavaScript puro mínimo-Slide. js

Vista prévia

Descripción

Slide. js es una biblioteca deslizante de JavaScript ligera y libre de dependencia para alternar entre una matriz de imágenes con efectos deslizantes horziontal/verticales o con Desvanecimiento cruzado.

Funcionamiento

Cargue los archivos JavaScript y CSS necesarios en el archivo HTML.

<link rel="stylesheet" href="dist/css/slide.css">
<script src="dist/js/slide.js"></script>

Cree un elemento DIV que se separará como contenedor del control deslizante.

<div id="slide"></div>

Cree un nuevo objeto Slider y especifique una matriz de imágenes que desee presentar.

new Slide('#slide', {


imgs: [



'1.jpg',



'2.jpg',



'3.jpg',


]
});

Cambie la dirección deslizante predeterminada a ' horizontal '.

new Slide('#slide', {


imgs: [



'1.jpg',



'2.jpg',



'3.jpg',


],


animation: 'slideLeft'
});

Establezca la animación en ' fade ' para que el deslizador actúe como una proyección de diapositivas de fundido cruzado.

new Slide('#slide', {


imgs: [



'1.jpg',



'2.jpg',



'3.jpg',


],


animation: 'fade'
});

Especifique la altura/anchura fija del deslizador.

new Slide('#slide', {


imgs: [



'1.jpg',



'2.jpg',



'3.jpg',


],


width: 600,


 height: 400,
});

Configuración del comportamiento de reproducción automática.

new Slide('#slide', {


imgs: [



'1.jpg',



'2.jpg',



'3.jpg',


],


autoswitch: {



open: true,



delay: 2000


},
});