Los slideshow o también denominados Carousel son elementos que se pueden visualizar en una página web que lo que hacen es que se puedan ver muchas imágenes en un mismo espacio, pasándose automáticamente o pulsando un botón. Aunque actualmente muchos gestores de contenido o incluso Wordpress nos da la posibilidad de instalar plugins para este fin, nosotros queremos que conozcas cómo crear un slider de imágenes con JavaScript, para que, una vez sabiendo el código utilizado, puedas modificarlo y darle el aspecto que más te gusta, para que personalices tu web al máximo.
Slider de imágenes con JavaScript puro
Antes que nada, queremos indicar que esta guía paso a paso solo va a poder ser realizada por aquellas personas que cuenten con un conocimiento básico en HTML, CSS y JavaScript, pues de lo contrario, podría ser sumamente complicado seguir el tutorial.
La estructura principal, como ya sabrás es el HTML, por lo tanto, lo que debemos escribir primero es este elemento. Al escribirlo, lo que hacemos es indicar el lugar donde va a situarse el Slidershow y una vez hecho esto, empezaremos a agregarle códigos para dejarlo como nosotros nos interesa. Una vez hecho esto, pasaremos a los siguientes apartados, en los que se encuentra el CSS y claro está, el JavaScript.
<div class="slideshow-container">
Este será el div será el comienzo donde nos encontraremos todos y cada uno de los elementos que albergará el slider, desde las imágenes, los botones y los indicadores.
<div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="img1.jpg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="img2.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="img3.jpg" style="width:100%"> <div class="text">Caption Three</div> </div>
Como has podido comprobar en los códigos que hemos escrito justo arriba, nos encontraremos las tres imágenes diferentes que se utilizarán en el slider. Se han dividido en tres div diferentes, ya que vamos a guiarte para que crees un slider con tres imágenes, para que luego, puedas modificarlo como más guste, añadiéndole o quitándole. Cada uno de los div contendrá lo que llamaremos una cara o imagen que aparecerá al pulsar el botón indicador. Como puedes ver, para que no te pierdas, denominaremos la class con “mySlides fade”. En cada división podrás encontrar desde el número de la cara, la ruta de la imagen, que debe ser correcta ya que de lo contrario no se verá, y también un texto. Acto seguido trabajaremos los botones que aparecerán:
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div>
Como has podido comprobar, al colocar </div> cerraremos el div que habíamos creado en un primer momento. La función onclick hará que la lógica JavaScript pueda ser ejecutada, cuando definamos los códigos precisos para este fin. Por otro lado, le daremos indicaciones al navegador para que muestre dichos botones gracias al código ASCII, el cual podemos identificarlo porque va después del “&”. Puede que nosotros veamos ahora mismo muchos números, sin embargo, el navegador los reconocerá y finalmente colocará unas flechas. Esto puede ser modificado por otros códigos que sepas para personalizar tu slider de imágenes.
Fuente de la imagen: www.serigrafiaslibra.com
Ahora vamos a empezar con los estilos, empezando ya la parte algo más complicada, y que debéis seguir paso a paso.
*{box-sizing:border-box}
Ahora toca el momento de darle las propiedades al contenedor del slider. Como puedes ver el nombre de la clase del siguiente código, es el mismo que escribimos en el div inicial, por lo que estos datos son muy importantes.
.slideshow-container{
max-width: 1000px;
position:relative;
margin:auto;
}
En el siguiente tendremos las imágenes que queremos que aparezcan por defecto.
.mySlides{
display:none;
}
Seguiremos con los estilos que hemos estado indicando en el código HTML para los botones de retroceder y avanzar.
.prev, .next{
cursor:pointer;
position:absolute;
top:50%;
width:auto;
margin-top:-22px;
padding:16px;
color:white;
font-weight:bold;
font-size:18px;
transition:0.6s ease;
border-radius:0 3px 3px 0;
}
Seguiremos indicándole al código donde se encuentran los botones de la izquierda y de la derecha, pudiendo modificarlo.
.next{
right:0;
border-radius:3px 0 0 3px;
}
Para que quede más profesional, le podemos incluir un efecto para que, cuando ponemos el ratón sobre la flecha, pueda cambiar y se vuelva a una tonalidad más oscura. Para hacer esto, utilizaremos la propiedad CSS denominada “hover” y se modifica dándole valores a rgba. El valor que sale al final, será la transparencia del botón.
.prev:hover, .next:hover{
background-color:rgba(0,0,0,0.8);
}
Le daremos un estilo al texto escrito, desde el color, tamaño y otros parámetros.
.text{
color:#f2f2f2;
font-size:15px;
padding:8px 12px;
position:absolute;
bottom:8px;
width:100%;
text-align:center;
}
.numbertext{
color:#f2f2f2;
font-size:12px;
padding:8px 12px;
position:absolute;
top:0;
}
Y para terminar las animaciones.
.fade{
-webkit-animation-name:fade;
-webkit-animation-duration:1.5s;
animation-name:fade;
animation-duration:1.5s;
}
@-webkit-keyframes fade{
from{opacity:.4}
to{opacity:1}
}
@keyframes fade{
from{opacity:.4}
to{opacity:1}
}
Para lograr que el Slider de imágenes que hemos creado se pase automáticamente tendremos que escribir este código.
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if(slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides,2000);
}
Esperamos que te haya servido de ayuda este tutorial para saber cómo crear un slider de imágenes con JavasScript.