Como hacer un slider en html5 y css3

Si quieres aprender como hacer un slider en html5 y css3 mira este artículo. También si quieres crear un carrusel de imágenes html5 y css3. Conseguirás animar con imágenes de fondos a pantalla completa (fullscreen) mediante distintas transiciones y sólo con código css3. Conseguirás un slider automático. Aprenderás como como hacer un slideshow. Este slider es responsive y es gratis, solo tienes que seguir las instrucciones para insertarlo en tu página web.

Código html5 del slider

<ul class="cb-slideshow">
	<li>
		<span>Image 01</span>
		<div>
			<h3>re·lax·a·tion</h3>
		</div>
	</li>
	<li><!--...--></li>
	<li><!--...--></li>
</ul>

Código css3 del slider

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}

.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 36s linear infinite 0s; 
}

.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    animation: titleAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px; 
}

.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/2.jpg);
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/3.jpg);
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/4.jpg);
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/5.jpg);
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/6.jpg);
    animation-delay: 30s; 
}

.cb-slideshow li:nth-child(2) div { 
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    animation-delay: 30s; 
}

@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

Si dispones de una web con un fondo estático y le quieres dar movimiento, mira esta transición, hay 4 demos diferentes con distintas transiciones de fotos. Es ideal para que consigas fondo en movimiento con html. Así conseguirás tu slider html5.

Aunque prácticamente todos los navegadores funcionan bien con animación css, si utilizas un navegador muy antiguo puedes tener problema. Aprenderás a como hacer un slider responsive sin javascript.

Como has podido ver, aprenderás a como slider con html5 y css3, siguiendo los pasos lo conseguirás sin problema y así tener tu slideshow solo con css.
Link | Fondo slideshow solo con css3