Hi all,
I made a full-screen slider, and I do NOT want it to pause on hover. It appears that the slider’s auto-play pauses on hover by default, and I cannot figure out how to remove this feature.
Also, I am trying to link two sliders to one control/Nav. Do any Java pros know how to do this?
Thanks!
Here is my public share link: LINK
(how to access public share link)
@samliew I saw that you solved my second problem a few years ago. I followed your steps but was not successful. I am hoping you can help 
Any thoughts?
You’re right! im having the same issue!
Ive posted a couple of requests for help here and didnt really get any response. i thought that the issue was related to interactions in the beginning, then noticed it was even without the interactions and now im noticing that it is stopping on hover.
I need help here also, my whole site is based on that Hero full page slider.
@forresto ive read another post about this and im a little confused.
Did Webflow set this option of pause on hover as an unchangeable default? please tell me thats not the case.
@bmh
@danro
@samliew
@PixelGeek
@Marqueezy
@snc99
I am having the same/similar problem. The slider is set to automatic action with user input disabled. The slider is a background that doesn’t move but as I scroll the slider pauses intermittently and eventually stops working
It does look like Webflow changed the default to pause on hover, from what I can tell. I tested the delay at different times and the problem is the same. Hopefully somebody can help us out…
@Brett Does the slider pause due to hover or scrolling?
Thanks for the response. it pauses due to scrolling. this is only true of the first slider.
here is a link. you will notice that half way up the reveal of the first slider it stops.
I’ve hidden all other web elements and it still happens.
https://daylighthome5.webflow.io/
best!
@Brett It looks like your problem may actually be due to hovering, not scrolling. If you scroll down on your page, it only pauses if the mouse is hovering over the image (below the blue section). If you scroll down and keep your mouse within the blue section, then the slider still runs.
@Brett @Nir I came up with a messy solution, but it seems to work. I just threw a Div on top of the slider (higher Z-index, and negative margins to align the Div and slider), so the slider doesn’t recognize any hover. The empty Div acts as a shield between the hovering mouse and slider. Not a clean solution, but it works for the time being.
@Lou2 @Brett @Nir
My first thoughts when reading the original post and the solution @Lou2 provided is this bug could be fixed with a tiny snippet of code. Slightly cleaner then placing a Div over top, although that is effective. Include this snippet of code in your head, replace [.class-name] with the class of the slider, or it’s containing element.
<style>
[.class-name] {
pointer-events: none;
}
</style>
This should prevent the slider from recognizing any cursor activity. The code will affect everything inside the element you assign the code to. So if you have a button or link block that corresponds to a slide, you will need to reverse the pointer-events code for the necessary class. To do this use this code:
<style>
[.class-name] {
pointer-events: auto;
}
</style>
If I have made a mistake, someone please let me know. Hope this helps!
Hi Guys!
I think I’m having a similar problem!
I want the user to have the option to click through slides if they wish, but without it pausing on hover (or after click). Has anyone found a way to do this? The transparent div block option won’t work for me as I still want it to be possible to click through the slider.
My preview site is: https://objekt-website-2020.webflow.io/
And my read only link is: https://preview.webflow.com/preview/objekt-website-2020?utm_medium=preview_link&utm_source=designer&utm_content=objekt-website-2020&preview=feda8c3d044eb88c3ffaf7a4987852ba&mode=preview
Thanks so much!
I’m new to webflow, and don’t know anything about coding!
Do you know if your solution will still allow the user to click through the slider?
Would you mind give me some guidance on how and where to implement this code? I know it’s possible to add an ‘embed code’ component, and then there is also a custom code section in project settings… so I’m not sure where this is supposed to go?
Thanks so much!
Laura
Hi Laura, yes it absolutely should. The two separate sections of code in my previous reply can be used for your scenario.
In Webflow you can incorporate custom code in a few different ways; an HTML embed, in the page settings, or to affect all pages it can be added in the project settings. For you, unless that slider is brought back on another page I would just add it to the page settings for your home page.
<style>
.carousel-home {
pointer-events: none;
}
.left-arrow, .right-arrow {
pointer-events: auto;
}
</style>
This code should be what you need. Copy and paste it into the Inside <head> tag section, including the <style> tags. With custom code you only see the results on a published site, so make sure to save the updated page settings(top right of pop-out), publish the site, then view the live site.
Hope this helps!!
AC
Hi Andrew!
Thanks for getting back to me so quickly
I just gave it a go but the behaviour of the slider is still the same… This is my first ever webflow project so I’m wondering if I might have set something up incorrectly… 
Hi Laura,
No, I don’t think so. It’s a strange bug in Webflow that is proving difficult to fight without getting too complex.
I do see that the behaviour has improved, the slider will continuously play even with mouseover, but once the cursor moves over the arrows the same problem appears. I will see if I can find an answer for you and get back.
AC
Hey Laura,
It actually is working. When you hover on a slider navigation element it pauses the autoplay, but when you take your mouse off of the slider navigation it resumes. The thing is, when you take your mouse off of the arrow your slide duration restarts which you currently have set to 4000ms, so after moving your mouse off of the arrow it will delay 4000ms then move to the next slide.
One issue is the size parameters of your left and right arrows. You currently have them set to 40% width and 80% max-height. They occupy so much space on the slider that the likelihood of a user having their cursor hovering over the arrow container without realizing is high, resulting in the slider to stay paused. There are two options for resolving this:
Option 1:
Resize the left arrow, right arrow closer to this:
Option 2:
Update the code from
.left-arrow, .right-arrow {
pointer-events: auto;
}
to
.carousel-arrow, .carousel-arrow-rhs{
pointer-events: auto;
}
This will limit cursor interaction to only the icon.
AC
Hey Andrew – ah yes, I think you’re on to something here! When I hover my mouse in the middle of the screen the slider autoplays perfectly well, but when I move over slightly to the left, or slightly to the right it pauses.
The reason I provided a lot of space for the parameters is because I ultimately don’t want the arrows to be visible, so I wanted there to be enough ‘clicking space’ for a user to tap through the slides (as if it was an instagram stories, or similar to this site: https://www.b-reel.com/).
I’ll play around with this in the morning (on UK time) and let you know the outcome!
Thanks so much!
Laura
Thank you so much Andrew! This is perfect. Appreciate the help
Do you by any chance know how to link two sliders together? In my project, I want to have two sliders controlled by only one set of buttons—so that when you click the set of buttons, both sliders will change slides in sync (and the autoplay would sync up too).
Best,
Lou
Hey Lou,
I have an idea, but I need to better understand the application. Do you have a preview so I can see what you are attempting to do?
AC