Deslizador de secuencia de imágenes simple con JavaScript puro

Vista prévia

Descripción

Una librería por secuencia sencilla y ligera de JavaScript que permite desplazarse por una matriz de imágenes cuando se hace clic o se pulsa.

Funcionamiento

Cargue el JavaScript del núcleo en el documento.

<script src="js/Slider.js"></script>

Cree un contenedor para el carrusel de imágenes.

<div id="container"></div>

Inserte una matriz de imágenes en el carrusel.

var config = {


// arbitrary number of images


images: [




'images/slide_1.jpg',




'images/slide_2.jpg',




'images/slide_3.jpg',




 'images/slide_4.jpg',


],


// possible values: 'auto', 'manual', 'automanual'


mode: 'auto',


// arbitrary interger (miliseconds)


swipeSpeed: 500,


// arbitrary interger (miliseconds). This is used in 'auto' and 'automanual' modes


swipeDelay: 3000
};

Inicialice el carrusel.

window.onload = function() {

var sliderElement = document.getElementById('container');

var slider = new Slider(config);


slider.init({



element: sliderElement

});
};

Los estilos CSS de ejemplo para el carrusel.

#container {

width: 100vw;

max-height: 600px;

border: 2px solid black;

overflow: hidden;

background-color: #000;

position: absolute;

top: 200px;

left: 0;
}

.slider-list {

margin: 0;

padding: 0;

position: relative;

height: 100%;

overflow: hidden;

width: 500vw;
}

.slider-list .slide {

list-style-type: none;

display: inline-block;

position: relative;

left: 0;

width: 100vw;
}

.slider-list .slide img {

display: block;

margin: auto auto;

max-width: 100vw;
}