How can I prevent my full-screen slider in Webflow from pausing when my mouse hovers over it?
- Enable autoplay in the Webflow Slider settings, then add custom JavaScript before the </body> tag to reinitialize the slider and override default hover behavior.
- Use an event listener on
.w-sliderto block themouseenterevent, ensuring autoplay continues on hover.
If your Webflow full-screen slider pauses on hover, it's likely due to built-in behavior of the native Slider component, which auto-pauses autoplay when the user hovers over it. You can disable this using a bit of custom configuration in Webflow.
1. Use Webflow’s Built-in Slider Settings
- Go to your Slider element in the Webflow Designer.
- In the Settings panel (right sidebar), check if Autoplay is enabled.
- Unfortunately, Webflow doesn’t expose a toggle to disable pause on hover from the Settings UI.
- You’ll need custom JavaScript for full control over slider behavior.
2. Add Custom Code to Disable Pause-on-Hover
- Go to Project Settings > Custom Code or Page Settings > Before </body> tag.
- Add the following JavaScript snippet inline:
Webflow.require('slider').plugins.forEach(s => s.destroy()); Webflow.require('slider').init({ disableSwipe: false, infinite: true, autoplay: true, delay: 5000 });
- This re-initializes the slider with your desired options, but some versions still respect pause-on-hover due to Webflow’s internal logic.
- A better way is to manually override the mouse events:
```javascript
document.querySelectorAll('.w-slider').forEach(slider => {
slider.addEventListener('mouseenter', e => {
e.stopImmediatePropagation();
}, true);
});
```
- This prevents the mouseenter event from pausing the autoplay.
Note: This code assumes your slider uses the default .w-slider class. If yours has a custom class or ID, replace .w-slider with the appropriate selector.
3. Cleanly Publish and Test
- Publish your site to staging and test the behavior.
- Make sure the autoplay continues uninterrupted when you hover the mouse over the slider.
Summary
To prevent your Webflow full-screen slider from pausing on hover, you need to override its default pause-on-hover behavior using custom JavaScript. Webflow does not provide a built-in toggle, so manually intercepting mouse events is the most reliable solution.