Crear un slide con HTML, CSS y Javascript

David Galisteo Cantero

En este post vamos a crear un sencillo y simple slide de imágenes, haciendo uso de HTML5, CSS3 y Javascript.

Podeis ver un ejemplo aquí: Slide con HTML, CSS y Javascript

El slide se dividirá en 3 partes, veámoslas:

Primero el código HTML:

< img class="img1" alt="alt img1" src="images/1.jpg" /> < img class="img2" alt="alt img 2" src="images/2.jpg" /> < img class="img3" alt="alt img3" src="images/3.jpg" />

Simplemente creamos un div con 3 imágenes dentro, las cuales irán desapareciendo y apareciendo pasado un tiempo determinado.

Vamos con el css:

.slide{
    border: .5em solid #ed9ce3;
    width: 600px;
    height: 300px;
    margin: 2% auto;
    border-radius: .5em;
    box-shadow: 10px 10px 5px #888;
    position: relative;
}

.slide img{
    width: 600px;
    height: 300px;
    position: absolute;
}

.slide .img2, .slide .img3 {
    display: none;
}

Lo que hacemos con estos estilos es mostrar SOLO la primera imagen al iniciar el slide, cuando una nueva imagen se muestre, tomará los estilos de img, es decir, tendrá posición absoluta, por lo que se colocará encima de las otras 2, mientras estas últimas están ocultas.

Por último, veamos el código que da la funcionalidad a nuestro slide:

//intervalo tiempo cambio img slide, 5 segundos, se llama a la función "avanzaSlide()"
setInterval('avanzaSlide()',5000);

//array con las clases para las diferentes imagenes
var arrayImagenes = new Array(".img1",".img2",".img3");

//variable que nos permitirá saber qué imagen se está mostrando
var contador = 0;

//hace un efecto fadeIn para mostrar una imagen
function mostrar(img){
	$(img).ready(function(){				
  		$(arrayImagenes[contador]).fadeIn(1500);		
	});
}

//hace un efecto fadeOut para ocultar una imagen
function ocultar(img){
	$(img).ready(function(){				
  		$(arrayImagenes[contador]).fadeOut(1500);		
	});
}

//función principal
function avanzaSlide(){
        //se oculta la imagen actual
	ocultar(arrayImagenes[contador]);
        //aumentamos el contador en una unidad
	contador = (contador + 1) % 3;
        //mostramos la nueva imagen
	mostrar(arrayImagenes[contador]);
}

Si queremos mostrar más de 3 imágenes, solo habría que adaptar el código para ello, nada complicado.

Puedes encontrar el código completo en mi repositorio de github, slide con HTML, CSS y Javascript.

Espero que os haya sido útil.

HackSaludos!

Publicado el 10-12-2013

Donar

Si te ha sido de ayuda y quieres hacer una donación te lo agradeceremos :)

Compartelo!


116 comentarios

Deja un comentario

Comentanos

*

Ir arriba de la pagina