Creación de un Slider Responsive desde cero con JavaScript y CSS

Los Sliders van perdiendo peso en los sitios web con el paso del tiempo aunque son de gran utilidad en imágenes relacionadas con productos, ciertas presentaciones, etc … En este HowTo aprenderás a crear un Slider Responsive desde cero usando JavaScript y CSS.

Durante el proceso de creación de un Slider podemos diferenciar 3 partes:

  1. Presentación mediante código HTML5 y que contienen cada una de las diapositivas que se van a presentar.
  2. Maquetación con código CSS con el que damos estilo y animamos el slider.
  3. Interacción usando código JavaScript con el que vamos a permitir al usuario interaccionar con el slider.

El ejemplo ya funcional se puede previsualizar desde aquí y su código se puede comprobar desde jsFiddle 

1. Presentación

Nuestro slider se va a componer de los siguientes elementos para así poder hacerlo funcional:

  • Un contenedor principal que va a contener la lista con las diapositivas y los botones que van a permitir a usuario interaccionar con ellas
  • Las diapositivas están agrupadas dentro de un elemento lista <ul> de HTML con atributo de clase «slides».
  • Dentro de cada elemento de lista incluimos un elemento <span> con la descripción de cada diapositiva.
  • Los botones que nos van a permitir avanzar y retroceder las diapositivas irán en un contenedor aparte.

2.- Maquetación

La maquetación del slider es parte importante ya que nos permite agrupar y posicionar las diapositivas en el contenedor, especificar el tamaño de este, posicionar los botones correctamente e incluir algún efecto.  Las partes que tendremos que tener en cuenta dentro de la maquetación son las siguientes:

  • El contenedor principal «slider» debe estar posicionado relativamente para que más adelante podamos posicionar los botones en el lugar correcto dentro de este.
  • Cada elemento <li> con su diapositiva también debe estar posicionado relativamente para que estos no se muestren uno a continuación de otro.
  • Cada elemento <img> de la lista ajustar la imagen respecto a su contenedor padre <li>. Para ello usamos la propiedad object-fit con valor cover.
  • Cada elemento <span> con las descripciones de cada diapositiva debe estar posicionado con medidas absolutas para ajustarlo en la posición deseada dentro de cada diapositiva.
  • Los botones deben tener medidas absolutas para poder posicionarlos correctamente en el lugar marcado.
  • Una sencilla animación para incluir opacidad con cada cambio de diapositiva.

Interacción

La interacción es una parte importante durante el proceso de creación de un slider. En este slider sencillo podemos destacar las siguientes partes:

  • Una función que controlará que diapositiva se tiene que mostrar y ocultando el resto.
  • 2 eventos «click» que nos van a permitir avanzar y retroceder las diapositivas.

 

 

Etiquetado

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.