Slider de imagen basado en CSS/CSS3 puro

Vista prévia

Descripción

Una solución CSS/CSS3 pura para crear una proyección de diapositivas de auto desvanecimiento adaptable de una lista de imágenes.

Funcionamiento

Crea un deslizador de imagen con 2 diapositivas.

<div class="demo">

<ul class="slider-2">


<li><!-- slide 1 --></li>


<li><!-- slide 2 --></li>

</ul>
</div>

Estilos CSS primarios para el deslizador de imagen.

[class*="slider-"] {

position:relative;

width:100%;

height:100%
}

[class*="slider-"] > li {

position:absolute;

height:100%;

top:0;

left:0;

bottom:0;

right:0
}

Añadir imágenes en el deslizador utilizando background-image propiedad CSS.

.slider-2 > li:nth-child(1) {

background: url(1.jpg) center no-repeat;

background-size: cover;

-webkit-animation: slider-2-1 15s linear infinite;

animation: slider-2-1 15s linear infinite
}

.slider-2 > li:nth-child(2) {

background: url(2.jpg) center no-repeat;

background-size: cover;

-webkit-animation: slider-2-2 15s linear infinite;

animation: slider-2-2 15s linear infinite
}

Agregue el efecto de transición de fundido cruzado al control deslizante con @keyframes CSS3.

@-webkit-keyframes
 slider-2-1 {
 0% {
opacity:1
}
45% {
opacity:1
}
50% {
opacity:0
}
95% {
opacity:0
}
100% {
opacity:1
}
}

@-webkit-keyframes
 slider-2-2 { 0% {
opacity:0
}
45% {
opacity:0
}
50% {
opacity:1
}
95% {
opacity:1
}
100% {
opacity:0
}
}