Slider de imagen HTML5/JavaScript/CSS mínimo

Vista prévia

Descripción

Un simple deslizador que le permite circular de forma automática e infinita a través de un grupo de imágenes con efectos de crossfade de CSS3 powered, construido usando HTML5, JavaScript puro y CSS/CSS3.

Funcionamiento

Envuelve tus imágenes usando HTML5 figure TAG. El deslizador generará automáticamente leyendas de imagen del atributo ALT de IMG y las mostrará en la etiqueta figcaption .

<div class="slider">

<figure>


<a href="#" class="effect">



<img src="img/1.png" alt="Text 1">


</a>


<a href="#" class="effect">



<img src="img/2.png" alt="Text 2">


</a>


<a href="#" class="effect">



<img src="img/3.png" alt="Text 3">


</a>


<a href="#" class="effect">



<img src="img/4.png" alt="Text 4">


</a>

</figure>

<figcaption></figcaption>
</div>

Las reglas básicas de CSS/CSS3 para el deslizador de imagen.

.slider {

width: 490px;

height: 125px;

position: relative;

margin: auto;

top: 112px;
}

.effect { transition: all ease-out 0.5s; }

figure a {

width: 100px;

height: 125px;

position: absolute;

top: 0;

left: 0;

opacity: 0;
}

figcaption {

width: 390px;

height: 125px;

float: right;

padding: 40px 20px;

box-sizing: border-box;
}

.active { opacity: 1; }

El JavaScript para activar el deslizador de imagen.

function slider(){

var config = {



// Set first image of slider


img: function(){



element = document.querySelector(".slider a:first-child");



element.classList.add("active");



this.legend(element);


},



// Add legend in the figcaption


legend: function(obj){



var legend = obj.querySelector("img").getAttribute("alt");



document.querySelector("figcaption").innerHTML = legend;


},



// Add class in the next slider


slide: function(){



element = document.querySelector(".active");



if(element.nextElementSibling){




element.nextElementSibling.classList.add("active");




config.legend(element.nextElementSibling);




element.classList.remove("active");



}



else {




element.classList.remove("active");




config.img();



}


}

}

config.img();

config.legend(element);


// Interval of slides

var auto = setInterval(config.slide,4000);
}
// Run when loading window
window.addEventListener("load",slider,false);