Deslizador de imagen adaptable de ancho completo con JavaScript-gallry. js

Vista prévia

Descripción

Gallry. js es una biblioteca de JavaScript para crear un deslizador de imagen totalmente adaptable con un sutil efecto deslizante basado en el motor de animación Velocity. js.

Funcionamiento

Cargue la biblioteca de JavaScript de Velocity. js necesaria desde una red CDN.

script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>

Descargue y cargue el gallry. CSS & gallry. js en el documento.

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

Cree un contenedor para el control deslizante de imagen.

<div id="attach">
</div>

Cree un nuevo objeto de galería.

var gallery = new Gallery();
var slides = []; // slides array stores slide objects

Establezca la declaración de elemento con el elemento al que anexar la galería.

var el = document.getElementById("attach");

Agregue imágenes al control deslizante.

// addSlide along with slide name, image path, and project array
gallery.addSlide("slide1", "1.jpg", slides );
 gallery.addSlide("slide2", "2.jpg", slides );
gallery.addSlide("slide3", "3.jpg", slides );
gallery.addSlide("slide4", "4.jpg", slides );
gallery.addSlide("slide5", "5.jpg", slides );

Inicializar el deslizador de imagen.

gallery.init( gallery, slides, el );

Establecer preferencias.

gallery.preferences( 450, "easeInOut", true );