Auto Scroll para los elementos de sliders, no están disponibles por defecto en Bricks. En este artículo, te mostraré cómo agregar la extensión Auto Scroll de Splide.js a los elementos de tipo Slider y Nested Slider en Bricks Builder. Además, exploraremos cómo aprovechar otras extensiones de Splide.js y personalizar completamente tus sliders.

¿Qué es Splide.js y por qué necesitamos la extensión Auto Scroll?

Splide.js es una biblioteca ligera y flexible para crear sliders interactivos. Bricks Builder utiliza Splide.js como base para sus elementos de slider. Sin embargo, la funcionalidad de desplazamiento automático (auto scroll) no está incluida de forma nativa.

Con la extensión Auto Scroll , puedes hacer que tus sliders se muevan automáticamente, lo cual es ideal para:

  • Crear presentaciones dinámicas.
  • Resaltar contenido importante.
  • Mejorar la experiencia del usuario en sliders promocionales o de portafolio.

Además, esta solución no solo se limita al auto scroll. También puedes usar otras extensiones de Splide.js para añadir funcionalidades avanzadas.

Paso 1: Registrar y Cargar la Extensión Auto Scroll

El primer paso es registrar y cargar la extensión Auto Scroll . Puedes hacerlo desde un CDN o descargando el archivo y alojándolo en tu propio servidor. Aquí te muestro ambas opciones:

Opción 1: Usar un CDN

Si prefieres una solución rápida y sin complicaciones, puedes cargar la extensión directamente desde un CDN. Agrega el siguiente código PHP a las funciones de tu tema o plugin:

<?php
add_action('wp_enqueue_scripts', function() {
    // Registrar y encolar el archivo JavaScript de la extensión Auto Scroll
    wp_enqueue_script(
        'bricks-splide-auto-scroll', // Handle (nombre único para el script)
        'https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js', // URL del JS de la extensión desde CDN
        [ 'bricks-splide' ], // Dependencias (requiere el núcleo de Splide.js)
        '0.5.3', // Versión del archivo
        true     // Cargar en el footer (true) o en el header (false)
    );
}, 11 );

Opción 2: Descargar y Alojar Localmente

Si prefieres tener más control sobre los archivos o evitar dependencias externas, puedes descargar la extensión desde el repositorio oficial de Splide.js y colocarla en tu tema hijo o plugin personalizado. Por ejemplo:

  1. Descarga el archivo desde Splide.js Extensions .
  2. Colócalo en la carpeta assets/js de tu tema hijo o plugin.
  3. Registra el archivo localmente:
<?php
add_action('wp_enqueue_scripts', function() {
    // Registrar y encolar el archivo JavaScript de la extensión Auto Scroll (local)
    wp_enqueue_script(
        'bricks-splide-auto-scroll', // Handle (nombre único para el script)
        get_template_directory_uri() . '/assets/js/splide-extension-auto-scroll.min.js', // Ruta al archivo local
        [ 'bricks-splide' ], // Dependencias (requiere el núcleo de Splide.js)
        '0.5.3', // Versión del archivo
        true     // Cargar en el footer (true) o en el header (false)
    );
}, 11 );

Paso 2: Inicializar la Extensión con JavaScript

Una vez que la extensión está cargada, necesitamos inicializarla para aplicar el auto scroll a nuestros sliders. Aquí está el código JavaScript que debes usar:

<script>
  // Esperamos a que el DOM esté completamente cargado antes de ejecutar el script
  document.addEventListener("DOMContentLoaded", function (e) {
    // Verificamos si estamos en el frontend de Bricks Builder
    if (!bricksIsFrontend) return; // Si no estamos en el frontend, detenemos la ejecución

    // Usamos un timeout para asegurarnos de que los sliders estén completamente inicializados
    setTimeout(() => {
      // ID del slider específico que queremos modificar (debes reemplazar "zdnpzf" con el ID real de tu slider)
      const splideId = "zdnpzf";

      // Accedemos a la instancia del slider desde los datos globales de Bricks
      const splide = window.bricksData?.splideInstances[splideId];

      // Si no encontramos la instancia del slider, mostramos un error en la consola y detenemos la ejecución
      if (!splide) {
        console.error(`Splide con ID "${splideId}" no encontrado.`);
        return;
      }

      // Verificamos si las extensiones de Splide están disponibles
      if (!window.splide?.Extensions) {
        console.error("Las extensiones de Splide no están disponibles.");
        return;
      }

      // Destruimos la instancia actual del slider para poder reconfigurarlo
      splide.destroy();

      // Configuramos nuevas opciones para el slider
      splide.options = {
        type: "loop", // Hacemos que el slider funcione en bucle infinito
        drag: true, // Permitimos el arrastre manual del slider
        focus: "center", // Centramos el foco en el slider
        autoScroll: {
          speed: 1, // Velocidad del auto scroll (0.5 es lento, 1 es rápido)
        },
      };

      // Montamos la extensión Auto Scroll y aplicamos las nuevas opciones
      splide.mount(window.splide.Extensions);
    }, 200); // Timeout de 200ms para asegurar que los sliders estén listos
  });
</script>

Explicación del Código

  1. Verificación del Entorno :

    • El script verifica si estamos en el frontend (bricksIsFrontend) antes de ejecutarse.

  2. Acceso a la Instancia de Splide :

    • Usamos window.bricksData?.splideInstances[splideId] para acceder a la instancia específica del slider. En este caso, el ID del slider es zdnpzf.

  3. Configuración de Opciones :

    • Configuramos el tipo de slider como loop para que se repita infinitamente.
    • Activamos el arrastre manual (drag: true) y centramos el foco.

  4. Montaje de la Extensión :

    • Finalmente, montamos la extensión Auto Scroll usando splide.mount(window.splide.Extensions).

Personalización Avanzada: Más Allá del Auto Scroll

Este enfoque no solo es útil para agregar la extensión Auto Scroll . También puedes usarlo para:

 

  1. Agregar Otras Extensiones de Splide.js :

    • Splide.js ofrece varias extensiones, como Video, Intersection, Grid, y más. Simplemente carga la extensión correspondiente y ajusta las opciones en el código JavaScript.

  2. Personalizar Cualquier Aspecto de Tus Sliders :

    • Si hay configuraciones que Bricks Builder no permite editar directamente, puedes usar este método para modificar cualquier opción de Splide.js. Por ejemplo:
      • Cambiar la navegación (flechas, puntos).
      • Ajustar la velocidad de transición.
      • Habilitar/deshabilitar el arrastre manual.

  3. Crear Funcionalidades Personalizadas :

    • Si necesitas implementar una funcionalidad completamente nueva, como un slider que responda a eventos específicos (scroll, clics, etc.), puedes adaptar el código JavaScript para lograrlo.

Consejos Adicionales

  • Personaliza la Velocidad : Puedes ajustar la propiedad speed en las opciones de autoScroll para controlar la velocidad del desplazamiento.
  • Compatibilidad con Dispositivos Móviles : Usa los breakpoints para modificar el comportamiento en pantallas pequeñas.
  • Depuración : Si algo no funciona, revisa la consola del navegador para identificar errores.

Conclusión

Agregar la extensión Auto Scroll de Splide.js a Bricks Builder es una excelente manera de mejorar la funcionalidad de tus sliders. Además, este enfoque te permite aprovechar otras extensiones y personalizar completamente tus sliders según tus necesidades.