How can I fix the issue where the slideshow on my Webflow website's homepage is not showing up in the published version, but is visible in design mode?
TL;DR
- Ensure the slideshow is visible across all breakpoints and not hidden by styles or interactions.
- Check that all content is properly placed inside the slider structure and that it's not affected by z-index, positioning, or hidden animations.
- Confirm you're publishing to the correct domain and that no custom code or CMS settings are interfering.
If your slideshow is visible in Webflow Designer but missing on the published site, there are several common reasons this can happen.
1. Check Visibility Settings
- Select the Slideshow element in Designer.
- Look under the Style panel for any settings where display is set to none, or visibility is hidden.
- Make sure no breakpoints (e.g., Tablet, Mobile) hide the slider unintentionally.
2. Verify Content Is Inside the Slider
- Make sure that slides and content (images, text, etc.) are properly placed inside the Slider → Slide → Content Structure in the Navigator.
- If layer order is off, it may appear correct in design mode but not render live.
3. Check for Interactions or Animations
- Look in the Interactions panel (IX2) for any Page Load or Page Scroll interactions that may be inadvertently setting the slider’s opacity to 0 or moving it off screen.
- Disable or test these interactions to see if the live version behaves differently.
4. Examine Z-Index and Position
- Ensure the z-index of the Slideshow is high enough to appear above overlapping elements (e.g., nav bar, background overlays).
- Also review position settings (Relative, Absolute, Fixed) that may cause layout conflicts.
5. Publish the Correct Domain
- Click Publish and ensure you're publishing to the correct Webflow.io staging URL and/or custom domain.
- If you're checking only the custom domain and it's cached, clear cache or force refresh the page.
6. Disable Custom Code Temporarily
- If you’ve added any custom code in the Page Settings or Site Settings, temporarily remove it.
- Faulty JavaScript or third-party scripts can interfere with Webflow’s native slider.
7. Verify CMS Data (if slider is CMS-bound)
- If your slideshow pulls from a Collection List, make sure:
- The Collection has published items.
- Filters are not excluding items.
- You’ve enabled a limit of more than one item, or pagination isn’t hiding other slides.
Summary
The slideshow not appearing in your published Webflow site is usually due to visibility settings, interactions, or incorrect structure in the design. Check styles, interactions, and element placement, and make sure you’re publishing to and checking the correct live domain.