Disable Slider Pause on Hover

Hi, I have a full-screen slider on my landing page. Its purpose is to transition through some pictures automatically. However, I notice that when my mouse is hovering over the full-screen, the pictures are on pause and do not transition unless my mouse is off of the full-screen. This is not ideal.

I have looked throughout the forums and people are saying that they have the opposite problem, which is they need it to PAUSE ON HOVER. But it seems now the default is that it does indeed pause on hover, and I need it to NOT pause on hover! Why isn’t this a simple toggle?

Any help on how to resolve this, even some custom code would be appreciated!

Here is my public share link: https://preview.webflow.com/preview/ae-website-project?utm_medium=preview_link&utm_source=designer&utm_content=ae-website-project&preview=c1c27c7a23f3516cc075a644458f97e6&mode=preview

1 Like

I am having the same problem, seems like an oversight to simply disable it as full screen sliders are quite common place. Is there any code we can add to reverse this feature? A toggle in the setting would be much more appropriate but I think disabling the transitions after a users first interaction with the slider navigation is perhaps better practice, this way the user can take control of the slider but it doesn’t disable it unnecessarily. The whole purpose of a sliders is to change so why choose to fully disable its main function? Anyway would really love a fix if anyone has one please. Thank you.


If webflow made this into a default it would be one of the dumbest thing they’ve ever done.
I haven’t seen that many people asking for pause on hover, because why on earth would that be a thing?

it messes up the entire UX, confuses the site visitor completely, and destroys design concepts.
It took me a couple of days to even realize this was a feature! i thought it was a bug.

WE NEED TO REVERSE THIS ASAP! or at lease give us a work around instead of forcing on an entire community these arbitrary design functions 90% of webflow never asked for!

Especially when the slider is full page! a user’s mouse pointer is automatically gonna be positioned somewhere on the page, which than would automatically pause the slider before the user even understands there is a slider function here!


1 Like

@Marqueezy & @snc99 - This is definitely the right move, as most sliders include calls to action that need time to click. Using websites that contain clickable elements in sliders that don’t stop is terrible UX, so defaulting to this behavior is welcome.

You can get around this by giving your slider a negative z-index so it sits behind an element with a transparent background—which prevents the hover from triggering and stopping the slider. You can see an example here:


Read-only: https://preview.webflow.com/preview/mikes-awesome-project-003eb9?utm_medium=preview_link&utm_source=designer&utm_content=mikes-awesome-project-003eb9&preview=fe69cc0009193a8ec56ed05f9c6a9199&pageId=5f448d415e58d36d4457d172&mode=preview

Not sure if this is what the Webflow team considers an appropriate solution, but it should help solve your issues without resorting to custom code.

1 Like

should be a left to the designer as an option to the slider on of off. IMO

Perfect solution to solving the stopped slider issue… thank you

For everyone coming across this thread while looking for a solution to prevent the “stop slider on hover” default behaviour (like me), there is an easy solution:

add a custom class to your slider element and embed the following css as a custom embed:


Bear in mind this will make your slider completely non-interactive! Works great for a timed animation, etc.


Thanks dwehrmann, exactly what I needed!

And if anyone reading this is like me, and needs a child element to still be interactive (e.g. you want to disable pause on hover, yet you want links within the slider to still work) then simply target the element class that needs the functionality with:

1 Like

You can actually put a DIV on top of the slider. That will start the slideshow even if the mouse is hovering over it.

i tried this and it didn’t work. can you please explain how you did it. thanks

I put a DIV below the slider (not in, but below in the object tree).
Absolute position, “fill all” (square button)
Width & height 100%
It actually also “covers” the left/right arrows in the slider object. But clicks go through.
If the user clicks left/right button, the slideshow stops.
I’m actually not sure of the logic here and why it’s working like it is, but it works almost as I want at least.
You can test it out at https://www.nilento.se
Hope this helps!


In bootstrap.bundle.js find this code
const Default$a = {
interval: 5000,
keyboard: true,
slide: false,
pause: ‘hover’,
wrap: true,
touch: true

Change pause: ‘hover’ to pause: ‘none’