How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
- Add JavaScript to stop Webflow's slider hover events from triggering autoplay pause by intercepting mouseenter and mouseleave on the slider mask.
- Sync two sliders by detecting the active slide index on the main slider and programmatically activating the same index on the secondary slider when arrows or dots are clicked.
You're trying to prevent a full-screen slider from pausing on hover and also link two sliders to a shared control/navigation in Webflow. Here's how to achieve both using Webflow settings and some custom JavaScript.
---
1. Disable Pause on Hover in Webflow Slider
Webflow’s native slider component pauses autoplay on hover by default and doesn’t expose a setting in the UI to disable it, so you’ll need custom JavaScript.
- Step 1: Add a Slider element and ensure that Autoplay is enabled in its settings.
- Step 2: Add this script using Page Settings > Inside <body> tag, or through an Embed element:
```
<script>
const sliders = document.querySelectorAll('.w-slider');
sliders.forEach(slider => {
const mask = slider.querySelector('.w-slider-mask');
if (mask) {
mask.addEventListener('mouseenter', function(e) {
e.stopImmediatePropagation();
}, true);
mask.addEventListener('mouseleave', function(e) {
e.stopImmediatePropagation();
}, true);
}
});
</script>
```
- This script stops the hover event from bubbling to Webflow’s script that causes the slider to pause.
---
2. Link Two Sliders to a Single Navigation
To synchronize two sliders (e.g., a main visual slider and a thumbnail or text slider controlled by the same arrows or dots):
- Step 1: Create two separate Slider components, giving each a unique class like
slider-mainandslider-secondary. - Step 2: Hide the navigation/arrows of the secondary slider so you're only using one set of controls.
- Step 3: Add this script to sync the sliders:
```
<script>
const mainSlider = document.querySelector('.slider-main .w-slider');
const secondarySlider = document.querySelector('.slider-secondary .w-slider');
if (mainSlider && secondarySlider) {
const navBtns = mainSlider.querySelectorAll('.w-slider-arrow-left, .w-slider-arrow-right');
navBtns.forEach(btn => {
btn.addEventListener('click', () => {
const mainIndex = mainSlider.querySelector('.w-slider-dot.w-active')?.dataset.wfSlide;
const secondaryDots = secondarySlider.querySelectorAll('.w-slider-dot');
if (mainIndex && secondaryDots[mainIndex]) {
secondaryDots[mainIndex].click();
}
});
});
// Optional: sync dots
const dots = mainSlider.querySelectorAll('.w-slider-dot');
dots.forEach((dot, i) => {
dot.addEventListener('click', () => {
const secondaryDots = secondarySlider.querySelectorAll('.w-slider-dot');
if (secondaryDots[i]) {
secondaryDots[i].click();
}
});
});
}
</script>
```
- This ensures clicking arrows or dots on the main slider navigates the secondary slider to the same index.
---
Summary
- Prevent slider from pausing on hover by intercepting and stopping Webflow's internal hover events via JavaScript.
- Sync two sliders using JavaScript to trigger the same slide index on both when controls are clicked.
This gives you centralized navigation and continuous autoplay without interruption from hover events.
