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.

Por qué estudiar Programación en PHP, Javascript y MySQL es una buena idea
13/06/2018
Albert Miró

Por qué estudiar Programación en PHP, Javascript y MySQL es una buena idea

¿Estas pensando en realizar un curso en programación? En este post compararemos algunos!

Qué son las metodologías ágiles y cómo aplicarlas a un proyecto
28/05/2018
Albert Miró

Qué son las metodologías ágiles y cómo aplicarlas a un proyecto

Existen métodos para aumentar tus niveles de productividad, ya hay muchas empresas que las ponen en practica. Conoce algunas de ellas.

Qué es la ciberseguridad y cual es el perfil profesional que buscan las empresas
24/04/2018
Carlos Yañez

Qué es la ciberseguridad y cual es el perfil profesional que buscan las empresas

La ciberseguridad es una preocupación cada vez mayor dentro de las empresas por el impacto que puede representar

Comentarios

No hay comentarios.

Añadir nuevo comentario