NO BUG: Nestable Slider: Customization via JavaScript

Bugs
2

Hi,
Thanks so much for your report!

I’m not a JS expert either, but something like this should work (maybe there are better solutions).
You must use different classes for the prev and next links for the respective sliders.

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  // Give some times for Bricks to init the sliders
  setTimeout(() => {
    // Define slider and button classes
    const sliderBtnPairs = [
      { sliderId: 'lghqly', prevBtnClass: '.my-prev1', nextBtnClass: '.my-next1' },
      { sliderId: 'wcfhhn', prevBtnClass: '.my-prev2', nextBtnClass: '.my-next2' }
    ];

    // Iterate over slider-button pairs
    sliderBtnPairs.forEach(pair => {
      // Get slider and button elements
      const mySlider = window.bricksData?.splideInstances[pair.sliderId] || false;
      const myPrevBtn = document.querySelector(pair.prevBtnClass);
      const myNextBtn = document.querySelector(pair.nextBtnClass);

      // Add event listeners if slider and buttons exist
      if (mySlider && myPrevBtn && myNextBtn) {
        myPrevBtn.addEventListener('click', () => mySlider.go('-1'));
        myNextBtn.addEventListener('click', () => mySlider.go('+1'));
      }
    });
  }, 250);
});
</script>

Best regards,
timmse

2 Likes