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:

<div class="slide">
     <figure>
          < 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" />
     </figure>
</div>

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

Compartelo!

106 comentarios

  • fabian46 dice:

    Hola David, una pregunta… Es necesario tener jQuery para poder implementar el JavaScript? Lo digo por esta linea en el codigo:

    o como lo puedo implementar? ya que yo he manejado JS sin frameworks

  • Mauricio dice:

    Que tal David ya probe el código y me parece interesante el problema que me surgió es, que de tras de mi slider queda posicionado el siguiente de las secciones de mi pagina como que las jala y las oculta a raiz de usar position relative y position absolut para el . Me pudieras orientar en esto?

    • Hola, en qué parte del html estás colocando el slide? Seguro que es por lo que tu dices, pero sin ver el html / css no sabría decirte exactamente :S.

      Si quieres puedes subirlo a algún sitio y le echo un ojo.

      Gracias!

  • Klas dice:

    Hola David! Gracias por el aporte.
    ¿Tengo una duda, no me hace el fade in igual que la demo, la imagen aparece muy de golpe. ¿Que tengo que modificar para que la imagen aparezca lentamente?
    Gracias!

  • Juan Carlos dice:

    Gracias por el aporte, donde inserto el código que da funcionalidad al slider? index, css, o?

  • ricardo parrales dice:

    hola buenas queria hacer una consulta sobre este slider ,,,,, 1 queria ver como puedo hacer para que el slider me ocupe el 100 % de la pagina horizontalmente ,,,, y otro como puedo añadir botones para avanzar y retroceder. gracias

    • Hola Ricardo, para hacer que ocupe el 100% del ancho solo tienes que poner un width: 100% al div del slider.

      Para añadir botones, solo añadelos con html (button) y asocia los clicks al avance / retroceso de las imágenes con JS.

      Espero que te sea de ayuda.

      Gracias!

Deja un comentario

Comentanos

*
Ir arriba de la pagina