slider - pause on hover

Question

Hi, I have a standard slider with autoplay and loop on my page and I would like it to stop when I mouse over it. how can I do that? Thank you

SemiColonWeb · Accepted Answer

Hello,

This is not available out of the box. So, you will need to customize this manually based on the example below:
[ch_pre type="js"]var mediaEl = document.querySelector('#videoEl');

mediaEl.onmouseover = function(){
if ( !mediaEl.paused ) {
mediaEl.pause();
}
};

mediaEl.onmouseout = function(){
if ( mediaEl.paused ) {
mediaEl.play();
}
};[/ch_pre]

This should work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

brano099 · Answer

I guess I'm stupid :) I have a slider with id="slider" and when I add your script to the web and replace in querySelector(' videoEl'); with querySelector(' slider'); it doesn't work and the slider is still running even when mouse is over slide

Semicolon Web · Answer

Hello,

Apologies for the Misunderstandings.

We had provided you with the codes for Pausing the Video on Hover. Simply add the data-hover="true" Attribute on the #slider Element.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

brano099 · Answer

Thank you