¿Cómo hacer un Slider o Carousel(Carrusel) en WordPress?

En el presente Instructivo se mostrará el procedimiento para la creación de un Main Slider en WordPress y la librería slick.

Esquema

El gráfico está dividido en dos grandes secciones Backend y Frontend, donde:

main-slider.php: En este archivo se construye el html, donde se obtendrá el campo personalizado y se recorrerá el repeater que contiene los slide. También en este archivo se muestran los elementos con los que se interactúa con el usuario, como son el dots y los arrows.

main-slider-card.php: Luego que se recorran los slide, se llama este archivo que configura como se muestran los slide.

main-slider.js: Este archivo contiene toda la lógica que genera las dinámicas de movimiento y permite el funcionamiento del slider, sin embargo, se requieren de algunos complementos que se encuentran en los archivos slick.js y utils.js.

slick.js: este archivo crea una clase con la librería de slick que personaliza código y tiene todos lo que necesitamos para crear slider o Carousel.

utils.js: Por otro lado este archivo contiene una serie de funciones y variables que son utiles en muchos de los proyectos, en particular para los Carousel requerimos de las funciones responsiveSliderNumL y la constante BREAKPOINTS que nos ayudará con el número de card mostrados en el responsive.

Detalles a tener en cuenta:

1. La clase que activa las funciones debe ser igual tanto en el archivo principal como en el archivo de JS, se recomienda que esta clase inicie por “js-”.

2. De esta manera se llama el card main-slider-card.php desde el archivo principal main-slider.php

3. Para mostrar los arrows se debe colocar este código al mismo nivel del js-slider (Deben ser hermanos).

4. En el archivo arrows.scss se deben respetar la estructura lo más posible para darles estilos correctamente, si se desea hacer un cambio se hace dentro del SCSS del archivo principal, en este ejemplo sería en slider-main.scss.

5. En el caso de los Carousel(Carruseles) en el archivo JS correspondiente debes importar las funciones responsiveSliderNumL y la constante BREAKPOINTS, las cuales usaremos para configurar el responsive de la siguiente forma.

5.1 Importamos los elementos del utils.js

import { responsiveSliderNumL, BREAKPOINTS } from "../libraries/utils";

5.2 Ejecutamos la funcion responsiveSliderNumL(‘Número slide para el Tamaño L’) , Esta función tomará este valor y con él dividirá el valor del contenedor del tamaño L y lo usará para calcular el número de slide que deben verse para el resto de tamaño, entregándonos un objeto con estos valores y dicho objeto lo guardamos en la constante numbersSlider.

const numbersSlider = responsiveSliderNumL (3);

Configurar el responsive.

1. Para definir la responsividad debemos tener presente que flujo natural de la librería Slick, que es de desktop primero; sin embargo, nosotros no programamos de esta forma, sino al contrario(Mobil primero) y para cambiar este orden natural, debemos pasarle a las opciones del carousel la siguiente propiedad mobileFirst: true,

2. Las propiedades que hacen el trabajo “La magia”, son slidesToScoll y slidesToShow , para el número de slides a mover cuando cliquean la flechas y el número de slides a mostrar en cada vista respectivamente. En este ejemplo lo primeros que hacemos es asignarle el valor más pequeño del objeto numbersSlider, (numbersSlider.xs), ya que cambiamos el flujo con mobileFirst: true, por lo tanto, el tamaño por defecto es el de mobil.

3. Para definir los tamaños usamos la propiedad responsive:[], que recibe una array con los diferentes tamaños de pantalla con sus respectivos cambios. En este punto es donde entra la variable BREAKPOINT que importamos desde utils; esta contiene los distintos tamaños de pantalla, los cuales usaremos en el responsive.

4. Ya configurado lo anterior, podremos armar nuestro resposive, donde usaremos BREAKPOINTS para obtener los distintos tamaños de pantalla y asignando los números de vistas y desplazamiento con numbersSlide.

responsive: [
  {
    breakpoint: BREAKPOINTS.get('s'),
    settings: {
      slidesToScroll: numbersSlider.s,
      slidesToShow: numbersSlider.s,
    }
  },
  {
    breakpoint: BREAKPOINTS.get('m'),
    settings: {
      slidesToScroll: numbersSlider.m,
      slidesToShow: numbersSlider.m,
    }
  },
  {
    breakpoint: BREAKPOINTS.get('l'),
    settings: {
      slidesToScroll: numbersSlider.l,
      slidesToShow: numbersSlider.l,
    }
  },
  {
    breakpoint: BREAKPOINTS.get('xl'),
    settings: {
      slidesToScroll: numbersSlider.xl,
      slidesToShow: numbersSlider.xl,
    }
  },
],

5. Si en algún momento no estamos conformes con el número de slide en algún tamaño, podemos sumar o restar para modificar el valor de numbersSlide.