Super simple imagen Slider en Vanilla JavaScript-Vanilla Slider

Vista prévia

Descripción

Un deslizador JavaScript simple, receptivo y puro que recorre un conjunto de imágenes con soporte de subtítulos.

Funcionamiento

Agregue imágenes a un contenedor deslizante y use atributo title para establecer las leyendas de la imagen.

<div id="my-slider">


<img class="image" src="1.jpg" alt="Alt 1" title="Image Caption 1">

<img class="image" src="2.jpg" alt="Alt 2" title="Image Caption 2">

<img class="image" src="3.jpg" alt="Alt 3" title="Image Caption 3">

<img class="image" src="4.jpg" alt="Alt 4" title="Image Caption 4">

<img class="image" src="5.jpg" alt="Alt 5" title="Image Caption 5">


<div class="caption" id="caption-placeholder"></div>

</div>

Los estilos CSS requeridos para el deslizador de imagen.

#my-slider {

position: relative;

margin: 0 auto;

padding-bottom: 15px;

max-width: 1024px;

width: 90%;

height: 300px;

border-bottom: 1px solid #9a9a9a;

text-align: center;

overflow: hidden;
}

#my-slider > img { display: none; }

#my-slider > img:first-child { display: block; }

#my-slider .caption {

position: absolute;

bottom: 35px;

left: 20px;

padding: 8px 12px;

background: rgba(255, 255, 255, 0.75);

text-align: left;
}

@media (min-width:900px) {

#my-slider .caption {

width: 320px;

min-height: 54px;
}

}

Cargue el script de Vanilla-Slider. min. js necesario en la parte inferior del documento, pero antes de la etiqueta body de cierre.

<script src="dist/vanilla-slider.min.js"></script>

vs.set({

containerId: 'my-slider',

iterable: '.image',

after: function (element) {


var title = element.getAttribute("title");


document



.getElementById("caption-placeholder")



.innerHTML = title;

}
});

/*
 * string: ElementId for the container element; default: 'vs-container'
 */
containerId: 'my-container',

/*
 * string: iterable elements to be visible/hidden; default: 'img' tags
 */
iterable '.images',

/*
 * integer: interval between each element, in milliseconds; default: 4000
 */
timeInterval: 3000,

/*
 * function: a function to be executed before the slider is changed
 */
before: function (element) { },

/*
 * function: a function to be executed after the slider is changed
 */
after: function (element) { },