Splide AutoScroll Extension for Bricks

Getting the AutoScroll feature to work with the Bricks Slider element is not as simple as flipping a switch. 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 by default. 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'];//replace 'bmfwuv' with the Bricks ID of your Nestable slider
      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

Configure your Nestable slider using custom options. Here’s the setup I have:

{
  "type": "loop",
  "direction": "ltr",
  "keyboard": "global",
  "height": "50vh",
  "gap": "2rem",
  "start": 0,
  "perPage": 4,
  "perMove": 1,
  "speed": "3000",
  "interval": "3000",
  "easing": "linear",
  "autoHeight": false,
  "autoplay": false,
  "pauseOnHover": false,
  "pauseOnFocus": false,
  "arrows": false,
  "pagination": false,
  "mediaQuery": "max",
  "breakpoints": {
    "1279": {
      "perPage": 4
    },
    "767": {
      "perPage": 3
    },
    "478": {
      "perPage": 2
    }
  },
  "drag": false
}

Note: Bricks has this bug where it adds a media query for your largest breakpoint to the slider configuration even though you haven’t specified any properties for smaller breakpoints. In my case, it includes the 1279 breakpoint which often has its own arbitrary properties that override the global properties we’ve already declared above. This is often the culprit when the slider doesn’t work as expected. So lets’ clear out the 1279 breakpoint:

{
  //rest of the code
  "breakpoints": {
    "767": {
      "perPage": 3
    },
    "478": {
      "perPage": 2
    }
  },
  "drag": false
}

Also ensure that there is no comma (,) attached to the last declaration

Step 4

Now for the autoscroll, in the custom options, add the following property:

"autoScroll": {"speed": 0.5}

You may also set a negative number to make the slider run in the opposite direction. Your completed options should now be like this:

{
  "type": "loop",
  "direction": "ltr",
  "keyboard": "global",
  "height": "50vh",
  "gap": "2rem",
  "start": 0,
  "perPage": 4,
  "perMove": 1,
  "speed": "3000",
  "interval": "3000",
  "easing": "linear",
  "autoHeight": false,
  "autoplay": false,
  "pauseOnHover": false,
  "pauseOnFocus": false,
  "arrows": false,
  "pagination": false,
  "mediaQuery": "max",
  "breakpoints": {
    "767": {
      "perPage": 3
    },
    "478": {
      "perPage": 2
    }
  },
  "drag": false,
  "autoScroll": {
    "speed": 0.5,
    "pauseOnHover": false
  }
}

Step 5

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>