Why is the auto play feature of the slider not functioning properly on the desktop version of my Webflow site in Safari and Chrome, despite working correctly on mobile devices?

If your Webflow slider's autoplay works on mobile but not on desktop in Safari and Chrome, it's likely related to interaction conflicts, visibility settings, or browser autoplay policies.

​

1. Check for Interactions or Overrides

​

• Inspect Page Interactions in the Webflow Designer (under the "Interactions" tab) that may disable or reset the slider on page load, scroll, or click.
• Common issues include a "Display: none" → "Display: block" animation on the slider, which can interrupt autoplay.
• Test by temporarily removing all interactions and publishing the site to isolate autoplay behavior.

​

2. Confirm Proper Slider Settings

​

• Select the Slider element, then check the Settings panel.
• Ensure "Autoplay slides" is enabled and that a timing duration is set.
• Verify "Pause on hover" is disabled if you want continuous autoplay.
• Desktop view might have different settings if you previously overrode styles per breakpoint.

​

3. Avoid Using Hidden Page Loads or Lazy States

​

• If the slider is inside a hidden div or section that appears after a delay or scroll, the browser may not initialize autoplay correctly.
• To test, move the slider to the top of the page and make it visible on page load.

​

4. Address Browser Autoplay Behaviors

​

• Some browser versions, especially Safari, restrict autoplay if they detect embedded media (like video) or if reduced motion is enabled in the OS.
• If your slider includes video backgrounds or embeds, this may block autoplay of the entire slider.
• Detect if prefers-reduced-motion: reduce is enabled in your OS (System Preferences → Accessibility on macOS) — Webflow respects this and pauses animations and autoplay.

​

5. Check for Custom Code Conflicts

​

• If you’ve embedded custom JavaScript that interacts with the slider (e.g., modifying its behavior or loading state), it might override Webflow's native autoplay.
• Remove or comment out custom code temporarily and test behavior. 

​

6. Inspect Layout Bugs or Responsive Hiding

​

• Ensure that the Slider is visible and not being hidden via Display: None on the Desktop breakpoint.
• Inspect with the Browser DevTools (right-click → Inspect Element) to see if the visibility or opacity is being affected by CSS at desktop screen sizes.

​

Summary

​

Desktop autoplay issues in Webflow sliders often stem from interactions that reset visibility, hidden initial states, conflicting custom code, or browser autoplay rules (especially in Safari). Inspect for override conditions and ensure consistent settings across breakpoints to resolve it.