Webflow slider pauses on hover

Design help Custom code
1

Hey all,

I’m trying to get my slider to autoplay without pausing. I’ve read all the threads on this and tried all the solutions, but the way my slider is set up with the two arrows covering the whole screen I think is really tough to get around this issue.

Would love any advice or help on this. Thanks

Here’s the link
https://preview.webflow.com/preview/nicholas-baker?utm_medium=preview_link&utm_source=designer&utm_content=nicholas-baker&preview=c038c11e4895cc687e116750095a45c5&pageId=632cf8d6b574b0a555d06ad0&workflow=preview

2

Anyone able to help with this? Still have this problem. Here’s an updated link.

https://preview.webflow.com/preview/nicholasbaker?utm_medium=preview_link&utm_source=designer&utm_content=nicholasbaker&preview=c038c11e4895cc687e116750095a45c5&workflow=preview

3

Hey,

Here is a not-so-great workaround but it will get it to work:

setInterval(function(){ 
        document.querySelector(".rightarrow").click();
}, 3000);

The code will click the right arrow every three seconds no matter what, even on mobile.

5

Genius, thank you so much Stefan.
Any way to make the timer reset when the user clicks? Right now if I click the arrow at 2500 ms the next slide only shows for 500ms.

1 Like
6

Yes, it’s possible.

First let’s set up the function for auto-clicking

function autoClicking() { document.querySelector(".rightarrow").click(); }
var myTimer = setInterval(autoClicking, 3000);

Second, on click of the right/left arrow, we reset the interval and start it over

$('.rightarrow').on('click', function() {
    clearInterval(myTimer);
    myTimer = setInterval(autoClicking, 3000);
});
$('.leftarrow').on('click', function() {
    clearInterval(myTimer);
    myTimer = setInterval(autoClicking, 3000);
});

Bonus: Depending on the click of the left/right arrow. Switch auto-clicking direction:

function autoClickingRight() { document.querySelector(".rightarrow").click(); }
function autoClickingLeft() { document.querySelector(".leftarrow").click(); }

var myTimer = setInterval(autoClickingRight, 3000);

$('.rightarrow').on('click', function() {
    clearInterval(myTimer);
    myTimer = setInterval(autoClickingRight, 3000);
});
$('.leftarrow').on('click', function() {
    clearInterval(myTimer);
    myTimer = setInterval(autoClickingLeft, 3000);
});
7

Amazing thanks Stefan!

Also fyi, ended up putting this in the “before tag” to get it to work.