WIP: Nestable slider arrows wont change despite custom icons added

Bugs
1

Browser: Version 145.0.7632.160 (Official Build) (arm64)
OS: macOS 26.3.1 (25D2128) Tahoe
URL: site not live
Video: Nestable slider arrow icon won't change | Loom

no matter what I try i cant seem to override the default arrows on the nestable slider using the UI setting to change the icons.

2

All works at this end … you can see here. Watch 2026-03-17 12-36-19 | Streamable

So wondering if it is a plugin conflict or a cache issue?

3

Hi chidlow,
Thanks so much for your report!

I can replicate the problem and have added it to the internal bug tracker. We will update this thread as soon as it is fixed.

Please set the icons on the breakpoint that was originally the base breakpoint; then it should work.

Best regards,
timmse

4

I’m facing the same issue. Thankfully, the nestable slider in bricks is powered by splide js which is highly customisable. So, if you don’t mind getting your hands dirty you could create two button elements and link them to your slider.

Here’s how you can do that.

  1. Create the two elements (ideally, they are buttons to make navigation friendlier for people who use screen-readers) and give them a class name along the lines of “my-slider-next-btn” etc.
  2. Note down your slider's unique bricks id. It should be something along the lines of #brxe-. So, if your slider's id is #brxe-jskklo, you need the "jskklo" part.
  3. Go to manage > page settings > custom code and paste the following in the header scripts area
document.addEventListener('DOMContentLoaded', (event) => { setTimeout(() => { const slider = document.querySelector('.brxe-slider-nested[data-script-id=""]'); if (!slider) return; 
const splideData = JSON.parse(slider.dataset.splide || '{}');
const isNotLoopType = splideData.type !== 'loop';

const myCustomSlider = window.bricksData?.splideInstances['<your-slider-id>'] || false;
const myCustomPrevBtn = document.querySelector('.<the previous button class>');
const myCustomNextBtn = document.querySelector('.<the next button class>');

if (myCustomSlider && myCustomPrevBtn && myCustomNextBtn) {
  // Function to update button attributes
  const updateButtonAttributes = () => {
    if (!isNotLoopType) return; // Only update attributes if type is not 'loop'

    const isFirst = myCustomSlider.index === 0;
    const isLast = myCustomSlider.index === myCustomSlider.Components.Controller.getEnd();

    // Update previous button attributes
    myCustomPrevBtn.disabled = isFirst;
    myCustomPrevBtn.setAttribute('aria-disabled', isFirst.toString());

    // Update next button attributes
    myCustomNextBtn.disabled = isLast;
    myCustomNextBtn.setAttribute('aria-disabled', isLast.toString());
  };

  // Add click event handlers for custom buttons
  myCustomPrevBtn.addEventListener('click', function () {
    myCustomSlider.go('-1');
  });

  myCustomNextBtn.addEventListener('click', function () {
    myCustomSlider.go('+1');
  });

  // Update button attributes on initialization
  updateButtonAttributes();

  // Update button attributes when the slide changes
  myCustomSlider.on('moved', updateButtonAttributes);
}

}, 250);
});

You can style your buttons however you want.

I got the solution from the following two places. (After some reasearch.)
1.https://lightspuncreative.com/how-to-create-custom-slider-navigation-controls-for-bricks/
2.Custom slider controls | Bricks Boilerplate Documentation