Cómo crear un slider de imágenes con JavaScript: los pasos

Te has fijado alguna vez en que muchas webs las imágenes se suceden una detrás de otra? ¿Te has iniciado en el mundo de la programación web y quieres conseguir este efecto? ¡Estás en el lugar indicado! En este blog te contaremos los pasos con los que aprenderás cómo crear un slider de imágenes con JavaScript. 

Si cuando acabes la lectura, y pongas en práctica los pasos, te quedas con las ganas de aprender más sobre las posibilidades que ofrece este lenguaje de programación, no dudes en consultar nuestro Curso de Programación en Javascript, PHP y MySQL. ¡En Deusto Formación te estamos esperando! 

Estos son los pasos a seguir para crear un slider de imágenes con JavaScript

Un slider de imágenes, también es conocido como Carousel o slideshow, no deja de ser un elemento más que conforma una página web, permitiendo que se pueden ver multitud de imágenes en un mismo espacio, apareciendo y desapareciendo automáticamente o pulsando un botón. 

Esta opción es fácilmente editable desde diferentes gestores de contenido que ofrecen la posibilidad de añadir las imágenes a una serie de plantillas preestablecidas o plugins. Sin embargo, a la hora de crear una web desde cero, esta característica se crea programando su estructura de antemano. 

Slider de imágenes con JavaScript puro

Con JavaScript podrás crear un código personalizable y modificable para conseguir una web visualmente atractiva. Este efecto visual es posible gracias a jQuery, la biblioteca multimedia de JavaScript, pero también se puede conseguir usando JavaScript puro estilizando el entorno con CSS. ¡Y aquí te contamos cómo emplear JavaScript puro! Ya que es una de las formas más ventajosas al ofrecer: 

• Controles de cambio. 
• Movimiento automático. 
• Activar o parar movimiento automático. 
• Personalizable con lenguaje CSS.

¡Toma nota de los pasos que vienen a continuación!

Escribir el HTLM

Lo primero que debemos hacer es escribir es el HTML. Es recomendable empezar siempre por esta parte, ya que es la estructura principal que sujetará el resto de elementos como el estilo visual. Una práctica habitual es ejecutar primero el código en HTML y CSS, para luego pasar a la lógica de JavaScript. 

Marcar un “div” inicial

Un div, es un contenedor en el que podemos poner cualquier otro elemento, incluso otros “div”. En cada div almacenamos una de las caras del slider, que identificamos como “mySlides fade”. Por lo tanto, primero tenemos que crear un “div” inicial, <div class=»slideshow-container»>, que contendrá todos los elementos del slider, ya sean imágenes, botones, plugins o indicadores de páginas. Un ejemplo de estructura con tres “divs” sería el siguiente: 

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

En cada bloque de “divs”, definimos un número, la ruta de la imagen y un texto.  Identificar los bloques de código definiendo una clase, o usando la propiedad “id”, es fundamental para mantener la estructura ordenada y definir los estilos.

Definir los botones

La estructura de los botones del slide tiene la siguiente forma: 

    <a class=»prev» onclick=»plusSlides(-1)»>&#10094;</a>

    <a class=»next» onclick=»plusSlides(1)»>&#10095;</a>

</div>

Este proceso debe ejecutarse justo después del anterior, para así poder cerrar el “div” inicial. Si se emplea un código ASCII – que emplea una codificación fija asignada a caracteres como letras, números, signos de puntuación o caracteres de control – para los botones, precedido por “&”, este será interpretado por el navegador web y mostrará los botones, mientras en el panel de control se verá el código. ¡No te asustes si ves números en vez de botones!

Definir los estilos

Siguiendo estos pasos, llegamos a este punto con dos flechas, lo que es habitual en HTML, pero también se pueden modificar por una imagen identificada con la etiqueta img. Lo importante es que esta identificación esté entre la apertura y el cierre de la etiqueta “a”. Con esta parte definida, pasamos a la definición de estilos, es decir a definir las propiedades del contenedor del slider inicial. Por ejemplo, marcando el tamaño, transición y  posición de las imágenes o el avance y retroceso de los botones – también su tamaño y posición. Las siguientes líneas muestran cómo se vería la definición del tamaño y posición de la imagen: 

*{box-sizing:border-box}

.slideshow-container{

 max-width: 1000px;

 position:relative;

 margin:auto;

}

Si lo que queremos es esconder la imagen por defecto, insertamos el código .mySlides{display:none;} 

Definir el color, texto y animaciones

Es habitual que al pasar el cursor sobre los botones o imágenes, se oscurezca el fondo. Este efecto, opcional, se consigue con una propiedad de CSS llamada “hover” que define el color en rango rgba. Es decir, en “red, green, blue, alpha”, siendo los tres primeros el valor de cada color en el que 0 implica la ausencia de color. El último es la transparencia. La siguiente línea de código es un ejemplo: 

.prev:hover, .next:hover{ background-color:rgba(0,0,0,0.8);} 

Con “hover” también se pueden modificar las propiedades del texto. Y también las animaciones insertando un patrón similar al siguiente, en función del código creado previamente: 

.fade { -webkit-animation-name:fade; -webkit-animation-duration:1.5s; animation-name:fade; animation-duration:1.5s;}

Automatizar el slider

Para conseguir la automatización del slider, siguiendo los códigos HTLM anteriores, deberemos insertar las siguientes líneas de código en la variable “slideIndex”:

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

}

Conseguiremos así declarar una variable para el índice del slider. Con la función “getElementByClassName” y “mySlides”. Esta función comprueba la longitud del slider, gracias al control del modelo de objeto del documento (DOM) que permite hacer JavaScript. 

¡Especialízate en JavaScript con un curso a tu medida!

Como habrás identificado, finalmente es muy poco el lenguaje de JavaScript empleado. Y es que JavaScript es muy útil para evitar añadir más código del necesario a través de, por ejemplo, bibliotecas. 

¿Quieres saber más sobre las ventajas de JavaScript? No dudes en consultar nuestro Curso de Programación en Javascript, PHP y MySQL. En Deusto Formación apostamos por una formación práctica a distancia con la que te convertirás en todo un experto/a en programación. 

Además, al finalizar el curso obtendrás una doble titulación: Diploma propio de Deusto Formación y título acreditativo de la Fundación General de la Universidad de Salamanca. 

¡Consúltanos cualquier duda sobre este programa a través del formulario!