Slider pause on hover to pause slides connected by data-x-slide-context (or other)

Support
#1

Is there a way of pausing 2 sliders when hovering over 1?
I have 2 sliders looping the same thing (client logos) one going forwards, one going backwards. On hover, I have a dropdown modal giving more information.
That all works perfectly but I’d like both slides to pause on hover - is it possible?

#2

Hello @RubberDuckers,

Unfortunately, there is no option for this by default. It might be possible with a custom script, but it will require modifications beyond the scope of support. If you’re interested, you can check out our One service.

Thank you for your understanding.

Best regards,
Ismael

1 Like
#3

ref here - maybe try setting the data-x-slide-context the same value or something else from that list?

#4

Cheers @Jonson - I did try these first but I think because the script that manages the pause is separate from the navigation that that’s intended for it doesn’t work. I also did notice that you couldn’t trigger the hover on the dropdown modal either.
I wanted to do something like the logo slider just above the fold here: https://www.yoyaba.com/en
But I wanted it to pause as I had a longer description to put in.

#5

Sorry for the delay. You can try this script in the Custom Code > Global JS field:

document.addEventListener('DOMContentLoaded', () => {
  const providerIndexArray = [];
  const providerIndex = window.csGlobal.rivet.store.container.providerIndex;
  const slideContainers = [];
  const autoPlayers = [];

  document.querySelectorAll(".x-slide-container-viewport").forEach((el) => {
    if (providerIndex.has(el)) {
      providerIndexArray.push(providerIndex.get(el));
      slideContainers.push(el);
    }
  });

  slideContainers.forEach((slide, index) => {
    autoPlayers.push(window.csGlobal.rivet.store.container.providers.get(providerIndexArray[index].get('slider')).state.autoplayer);
    if (autoPlayers.length > 0) {
      slide.addEventListener('mouseenter', () => {
        autoPlayers.forEach((player) => {
          player.hold("manual-pause");
        });
      });
      
      slide.addEventListener('mouseleave', () => {
        autoPlayers.forEach((player) => {
          player.release("manual-pause");
        });
      });
    }
  });
});

This should work but it will affect all inline sliders in the page.

Let us know the result.