Splide AutoScroll Extension for Bricks

Getting the AutoScroll feature to work with the Bricks Slider element is not as simple as flipping a button. This is because SpildeJS – the Javascript library that the Bricks Slider is based on, doesn’t include a continous autoscroll feature with the core library. SplideJS does, however, offer Auto Scroll as an extension. The following is how you can install the Auto Scroll extension and adapt it for use in Bricks Builder:

Step 1

Enqueue the extension script on the page you wish to use it.

<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide-extension-auto-scroll.min.js"></script>

Step 2

Add the following javascript in a codeblock on the page:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
      const instance = window.bricksData?.splideInstances['bmfwuv'];
      if (instance) {
        // Destroy the existing instance (optional).
        instance.destroy(true);

        // Mount the autoscroll extension.
        instance.mount({ AutoScroll: window.splide.Extensions.AutoScroll });
      }
    }, 100);
  });
</script>

Make sure to replace bmfwuv with the ID of your slider

Step 3

Now in the custom options, you can add the following property:

"autoScroll": {"speed": 1}

You may also set a negative number to make the slider run in the opposite direction

Step 4

If you do not wish to use custom options with your slider, you can use the following snippet and control the autoscroll behavior directly from the script:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
      const instance = window.bricksData?.splideInstances['bmfwuv'];
      if (instance) {
        // Destroy the existing instance (optional).
        instance.destroy(true);

        // Customize autoscroll options (e.g., interval, pauseOnHover).
        instance.mount({
          AutoScroll: {
            interval: 3000, // Set the autoscroll interval (in milliseconds).
            pauseOnHover: true, // Pause autoscroll on hover (optional).
            // Add other options as needed.
          },
        });
      } else {
        console.error('Splide instance not found.');
      }
    }, 100); // Delay for reliability.
  });
</script>