Slider stops when hovered, need a fix!

Got it. I went into my page settings of that particular page but only saw head and body custom code options. Where do I find the footer custom code input box? Thanks

It’s the 2nd box at the bottom, it says “Before body tag”

1 Like

This fixed it for me, thanks a ton Xel!

@Xel Hi there ! Thanks for the code, i just have a problem, when the slider is clicked (desktop and mobile) the slider stops any chance a function could disabled that ?

Thanks again for the fix.

Maxime.

Hi Maxime,

adding mousedown should do the trick.

<script>
  $(document).ready(function () {
    setTimeout(function () {
      $('.w-slider').unbind('mouseenter mouseleave mousedown');
    })
  });
</script>
2 Likes

Thanks a lot !
Works perfectly fine on desktop, but not on mobile :no_mouth:
If you have a trick this would be awesome ! If not, no problem you already are a hero to me !

:slight_smile: It works on my Android phone with Chrome/Firefox, but try to add touchstart

<script>
  $(document).ready(function () {
    setTimeout(function () {
      $('.w-slider').unbind('mouseenter mouseleave mousedown touchstart');
    })
  });
</script>
3 Likes

I’m on iOS and chrome, but touchstart works ! So huge thanks mate !
Have a good evening :wave:

1 Like

Wow!!! It works, super awesome, thank you very much Xel for the code.

1 Like

disable autoplay slides

add this to custom code before body tag

setInterval(function () {
$(“.ARROW-NEXT-CLASS”).click();
}, 4000);

.ARROW-NEXT-CLASS here is your next arrow class name do not forget the dot before
4000 here is the miliseconds for next tap

Thank you you solved it!!

1 Like

Hi Michael! Thank you for the code, it worked perfectly at start, but when I tried to play around clicking all the parts of the slider, it stopped momentarily, and goes back with the loop once I hover out my mouse from the slider. Here’s my website: https://fidelitymd.webflow.io/ Thanks.

Hi Paulo, the slider on your website works perfectly fine on my PC (Chrome & Firefox / Windows 10). I clicked everywhere on your slider and it never stopped. Website looks great by the way, Best, Michael

Hi Xel,
Thank you for the code! It’s as close as I’ve got to achieving what I’m aiming for. I just have one apparent remaining issue:

My slider continues when I hover over it (perfect!), but then I have a left and right button to click through (these work too), and once I’ve clicked one of these buttons, the auto slider does not continue to auto slide – it stays in a state of pause. At this point I can continue clicking through using the buttons, but the auto slide ceases to function.

Any ideas?

@Xel After selecting dots, it will not work again.

@umar_khay making clicks will affect other experiences, eg. it will close the mobile menu.

I think Webflow just has to provide an option to disable the “hover and pause slider” feature, as in many cases we really need to keep the slider playing even the cursor is on the slider. :slightly_smiling_face:

Yes, after clicking on a dot or arrow the auto slider will not start again. I also replied to mola about this by PM: I never found a solution/workaround for that.

1 Like

You rock, thank you @Xel !

1 Like

I managed to get around this without code by putting a transparent div one layer above the slider at the same size. ie. wrap the slider and the hover disabling transparent div inside a div, with the disabler layer one above the slider. You have the ability to control the size of the disabler using absolute positioning controls so as to only cover as much of the slider portion of the div wrap as you want.

@Xel Unfortunately this doesn’t work when the slider is in a symbol which I can’t figure out why.

I need the slider in a symbol because I’m using the Udesly Webflow to Shopify Converter which requires that the section be a symbol in order for it to be editable in shopify.

Thank you so much !!!