Tutorial: cómo crear un slider de imágenes con JavaScript
18/01/2018

Tutorial: cómo crear un slider de imágenes con JavaScript

Programación y Diseño Web

En muchas páginas web vemos en la parte superior un elemento muy común que, en muchas ocasiones, nos ofrece Wordpress, u otros gestores de contenido, los cuales van pasando imágenes una detrás de otra, ya sean posts de un blog o algún tipo de presentación que queremos mostrar. Estos elementos se llaman slideshow o Carousel. Esto es posible usando Jquery, pero también lo podemos lograr sin necesidad de importar ningún tipo de biblioteca externa, con el uso de JavaScript puro y HTML, con la ayuda de CSS para los estilos. En este post voy a repasar con vosotros estas tres partes para realizar un slider simple pero agradable para que podáis implementar en vuestra página web principal. La fuente original del código es W3Schools, un sitio que os recomiendo encarecidamente visitar si estáis interesados en el desarrollo web.

Nota: para este tutorial es recomendado tener un conocimiento básico de HTML, CSS y JavaScript.

Slider con JavaScript puro

Lo primero que debemos escribir es el HTML. Os recomiendo siempre empezar por esta parte ya que es la estructura principal donde se va a montar todo lo demás. Digamos que es el esqueleto donde el resto de elementos se van a colocar. Al igual que no empezamos a escribir los estilos sin tener una base con la que trabajar, aquí ocurre lo mismo. De hecho os recomiendo hacer primero el HTML y el CSS, y luego ocuparos de la lógica con JavaScript. A continuación el código separado por partes:

<div class="slideshow-container">

Empezamos declarando un div inicial que va a contener todos los elementos que irán dentro del slider. Esto incluye las imágenes que se mostrarán, los botones para avanzar o retroceder y los indicadores de las distintas “páginas” que tiene dicho slider.

<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>

Aquí tenemos las tres imágenes que vamos a usar para el slider. Si observamos, lo hemos dividido en tres div. Un div, si hacemos memoria, es un contenedor en el que podemos poner cualquier otro elemento, incluso otros div. De hecho, en cada div estamos almacenando una de las caras del slider. Esto lo identificamos de forma clara con una class llamada “mySlides fade”. Dentro de cada bloque con ese identificador estamos definiendo un número, la ruta de la imagen y un texto. Es importante que, siempre que trabajéis con HTML y CSS, identifiquéis vuestros bloques de código, ya sea definiendo una clase o usando la propiedad “id”. Esto es necesario para poder definir, más tarde, los estilos en una hoja externa, lo cual es el camino correcto a seguir. Nunca uséis estilos en linea a menos que sea totalmente necesario. A continuación, los botones:

       <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
       <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

Este código debe ir a continuación del anterior ya que tenemos el cierre del div inicial. En estos dos enlaces tenemos una función onclick que va a permitir ejecutar la lógica JavaScript que más tarde vamos a definir. Además, usaremos un código ASCII para los botones. Este código precedido por “&” será interpretado por el navegador y mostrará dichos botones, de modo que no importa que nosotros veamos una cosa extraña escrita con números. El resultado final van a ser dos flechas. Esto es algo bastante habitual en HTML, por lo que no os debéis extrañar, pero en realidad podéis usar lo que queráis, incluso insertar una imagen con la etiqueta img. Lo importante es que esté entre la apertura y cierre de la etiqueta “a”, ya que es lo que define el enlace. A continuación los estilos.

*{box-sizing:border-box}

Aquí definimos las propiedades del contenedor del slider. Recordáis el div inicial? Si os fijáis, el nombre de la clase es el mismo.
.slideshow-container{
 max-width: 1000px;
 position:relative;
 margin:auto;
}

A continuación escondemos las imágenes por defecto
.mySlides{
 display:none;
}

Añadimos los estilos para los botones de avanzar y retroceder, una vez más usando las clases que hemos definido previamente en el HTML.
.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;
}

Colocamos los botones a la derecha e izquierda

.next{
 right:0;
 border-radius:3px 0 0 3px;
}

Cuando pasemos el ratón por encima de ellos, les añadimos un efecto para que se oscurezca su fondo. Esto lo logramos con una propiedad CSS llamada “hover”, y definimos el color de fondo que deseamos. En este caso, usamos rgba, siglas de “red, green, blue, alpha”. Los tres primeros será el valor de cada color que, mezclados, darán el negro. Al ponerlos todos a 0 estamos indicando la ausencia de éste. El último valor es la transparencia, la cual será imperceptible porqué es muy pequeño.
.prev:hover, .next:hover{
 background-color:rgba(0,0,0,0.8);
}

Los estilos para el texto
.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 finalmente 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}
}

Todo con CSS y HTML.

Finalmente, la magia. Con este código JavaScript vamos a conseguir que el paso del slider sea automático.

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);
}

Bien, ¿qué estamos haciendo? Muy sencillo. Inicialmente nos estamos declarando una variable para el índice del slider, junto a una función. Dentro de dicha función estamos recuperando un elemento del DOM con “getElementByClassName” y buscamos “mySlides”, la clase que hemos definido en el HTML. Gracias al control del DOM que nos permite hacer JavaScript podemos hacer este enlace de elementos entre HTML, pasando por CSS y llegando al código JS. La idea detrás del código es que la función vaya comprobando la longitud del slider, guarde dentro de la variable slides el objeto del DOM para que finalmente vayamos mirando, cada dos segundos, dónde estamos para poder hacer la transición, y regresar al inicio si hemos llegado al final.

Al final JavaScript hay poco en realidad, únicamente 13 líneas, pero es que en muchas ocasiones es así. Si solo necesitáis un slider como este o otra funcionalidad muy simple, no merece la pena implementar bibliotecas como Jquery o hacer uso de Angular...porqué al final os van a añadir más código del necesario, empobreciendo la calidad de este y complicando su comprensión. En cambio aquí, si separamos en tres ficheros, .html, .css y .js, es muy fácil saber ubicar cada componente para poder trabajar con ellos.

¿Cómo lo véis?¿Complicado? Cualquier dificultad, dejad un comentario y os lo resolveré sin problema. Nos vemos en el próximo post.

Curso relacionado: Curso Superior de Programación con HTML5 y CSS

Comparte en:

Grado Superior de Desarrollo de Aplicaciones informáticas en la Salle de Barcelona. Trabaja actualmente como desarrollador de aplicaciones para móviles, especialidad en videojuegos.

Guía para montar un ecommerce para tu negocio
18/05/2018
Anna Mercadé

Guía para montar un ecommerce para tu negocio

Te gustaría empezar un ecommerce? lee esta guía informativa para arrancar como se debe!

Guía para elaborar un plan de comunicación de crisis en redes sociales
16/05/2018
Anna Mercadé

Guía para elaborar un plan de comunicación de crisis en redes sociales

¿Quieres conocer que hacer en caso de crisis en las redes sociales de tu compañía? continua leyendo!

Diseño de videojuegos basados en MDA
11/05/2018
Jordi Mula

Diseño de videojuegos basados en MDA

Estar en un punto de vista más cercano a las mecánicas del juego puede hacer que éstas estén muy bien definidas y trabajadas, pero no se está empatizando con la v...

Comentarios

No hay comentarios.

Añadir nuevo comentario