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?
- Use JavaScript to disable the slider's pause-on-hover by removing mouseenter/mouseleave listeners with
$('.w-slider').off('mouseenter mouseleave');. - Assign unique IDs to both sliders and use JavaScript to link their navigation buttons; for full sync (e.g., matching slide positions), consider using a library like Swiper.js.
To prevent a full-screen Webflow slider from pausing on hover and to sync two sliders with unified controls, you'll need to disable the hover pause behavior and implement JavaScript to link the sliders.
1. Disable Slider Pause on Hover
Webflow’s native slider automatically pauses on hover, and there's no UI setting to disable this. You’ll need custom JavaScript.
Go to the Page Settings or add a custom embed element and insert this JavaScript:
Inside the
<head>tag (for site-wide use) or before</body>for page-specific.Script to prevent pause on hover:
This targets the slider component by removing mouse event listeners.```javascript
Webflow.push(function () {
$('.w-slider').off('mouseenter mouseleave');
});
```This stops the slider from pausing on hover, allowing continuous autoplay.
2. Sync Two Sliders with One Navigation
Webflow doesn't natively sync two slider components, so you’ll need JavaScript to link their navigation controls and slide states.
Give each slider a unique ID in Webflow:
Slider A:
#slider-ASlider B:
#slider-BIf using native Webflow left/right arrows, you'll also need to override their behavior to control both sliders.
Sync navigation with custom JavaScript:
```javascript
Webflow.push(function () {
// Sync next and previous buttons
var $sliderA = $('#slider-A');
var $sliderB = $('#slider-B');$sliderA.find('.w-slider-arrow-left').on('click', function () {
$sliderB.find('.w-slider-arrow-left').trigger('click');
});$sliderA.find('.w-slider-arrow-right').on('click', function () {
$sliderB.find('.w-slider-arrow-right').trigger('click');
});// Optionally sync slide changes as well
$sliderA.on('slide', function (e, index) {
$sliderB[0].swiper.slideTo(index); // If using Swiper library
});
});
```Note: Webflow's slider is powered by its internal API, and doesn’t expose events like
slideby default. For tight syncing, you may need to override Webflow’s default slider with Swiper.js or Flickity.
Summary
To prevent a Webflow slider from pausing on hover, remove the mouseenter/mouseleave event listeners using JavaScript. To link two sliders under one set of controls, use matching button triggers and optionally a slider library like Swiper for full synchronization.