Crear un slide con HTML, CSS y Javascript
Anuncio:
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:
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!
116 comentarios
Gracias por el tutorial
No me funcionaba con la siguiente linea de jQuery:
Por lo cual la reemplacé por la siguiente y funcionó bien
Es muy buen ejemplo,me sirvió mucho.
Hola, buen post, pero tengo problemas, me bajo literalmente la misma carpeta que vos das en tu pagina y al ejecutarlo solo se queda la primera imagen, pero en la pagina tuya si funciona, que podría ser?
http://darkvid.github.io/Slide-HTML-CSS-Javascript/ <– Ahi funciona, pero cuando lo hago yo, nop :l
Agrego que todo lo hago en notepad++
Hola, comprueba que se está enlazando bien el archivo javascript 🙂
Si continuas con problemas, coméntanos 😉
Saludos!
tengo el mismo problema no me funciona el slader, no me fuciona y tengo todo bien redireccionado
Hola Norberto, ¿Podrías darnos más información? Podrías subir tu código a github para echarle un vistazo.
Gracias!
Hola, interesante tutorial funciona ala perfección. Te felicito
Pero tengo una duda como podría hacer que se mostraran mas de dos imágenes al tiempo? Es posible?
Hola Jhon! Gracias por tu comentario. Se podría hacer, pero tendrías que dar estilos a las imágenes para que cada una de ellas ocupe el 50% del contenedor, además de controlar con javascript la carga de las imágenes de dos en dos. En este tipo de situaciones, normalmente, se muestra solo una imagen, con dos imágenes valga la redundancia, es decir, un pequeño montaje, así resuelves tu problema con incrementar la dificultad. Saludos!
Buenas!
El slider le falta lo mas importante que seria el max-width: 600px; y en el caso de width al 100% = auto, hay que recordar que el día de hoy se navega mas por teléfono y por lo tanto es mejor que todo esté adaptable al dispositivo…
Amazigh os manda saludos.
Hola! Por supuesto, pero ya cada uno lo adapta como quiere 😉
Gracias y Saludos!