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?

To prevent a full-screen slider in Webflow from pausing on hover and to link two sliders to a single control, you need to adjust the Slider component behavior using both Webflow settings and custom JavaScript.

1. Disable Slider Pause-on-Hover

By default, Webflow sliders pause when hovered. To disable this:

• Webflow has no direct UI toggle, but you can override it with JavaScript.

• Add this script inside an Embed element or in the Page Settings > Before field:

  ```javascript
  const sliders = document.querySelectorAll('.w-slider');

  sliders.forEach((slider) => {
  slider.addEventListener('mouseenter', (e) => {
  const nav = slider.querySelector('.w-slider-nav');
  if (nav) {
  nav.setAttribute('data-autoplay', 'true');
  }
  });
  });
  ```

• Alternatively, you can prevent Webflow's hover event from affecting autoplay by re-enabling autoplay manually after hover:

  ```javascript
  const webflowSliders = document.querySelectorAll('.w-slider');

  webflowSliders.forEach(slider => {
  slider.addEventListener('mouseenter', () => {
  const mask = slider.querySelector('.w-slider-mask');
  mask.dispatchEvent(new Event('mouseout'));
  });
  });
  ```

2. Link Two Sliders to One Control/Navigation

Webflow doesn’t natively support syncing two sliders or controlling both from a single set of arrows or dots. Here's how to do it with JavaScript:

• Assume you have two sliders: one with class .slider-main and another with class .slider-secondary.

• Use Webflow's built-in w-slider-arrow-left and w-slider-arrow-right classes from your primary control slider.

• Add this script to sync navigation:

  ```javascript
  const mainSlider = document.querySelector('.slider-main');
  const secondSlider = document.querySelector('.slider-secondary');

  const nextMain = mainSlider.querySelector('.w-slider-arrow-right');
  const prevMain = mainSlider.querySelector('.w-slider-arrow-left');

  const nextSecondary = secondSlider.querySelector('.w-slider-arrow-right');
  const prevSecondary = secondSlider.querySelector('.w-slider-arrow-left');

  // Link forward
  nextMain.addEventListener('click', () => {
  nextSecondary.click();
  });

  // Link backward
  prevMain.addEventListener('click', () => {
  prevSecondary.click();
  });
  ```

Summary

To stop your full-screen Webflow slider from pausing on hover, use JavaScript to override or re-trigger autoplay. To link two sliders to a single control, simulate clicks on one slider’s nav arrows when controlling from another. Both are achievable using Webflow’s native classes with custom JavaScript.