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
  • Check that the slideshow's display and opacity settings are not hiding it, and review interactions to ensure it’s not hidden on page load.  
  • Ensure the site is republished, check z-index and positioning, audit custom code for interference, verify CMS content is valid, and test in Incognito or another browser.

If your slideshow is visible in Webflow Designer but not showing up on the published site, the issue is typically related to missing interactions, display settings, or publishing issues.

1. Check Element Visibility Settings

  • Select the Slideshow element in the Webflow Designer.
  • In the Style panel, look under the Layout section.
  • Make sure Display is not set to none (especially for the initial state).
  • If visibility is conditionally set (e.g., using Interactions), ensure that Initial State isn’t hiding the element.
  • Also verify Opacity is not set to 0% without an animation that makes it visible.

2. Review Interactions and Animations

  • Go to the Interactions panel (lightning bolt icon).
  • Check for any interactions that affect the slideshow or its wrapper.
  • Common mistake: an interaction sets opacity to 0 or display to none on page load.
  • If you're using a Page Load animation, ensure it reveals, not hides, the slideshow.

3. Ensure Content is Published

  • After making changes, click Publish at the top right and select Publish to Selected Domains.
  • Sometimes the Designer shows updated layouts not yet reflected in the live site due to publishing cache.

4. Check Z-Index and Positioning

  • Verify that other elements (e.g., a navbar, hero image, overlay) aren't sitting above the slideshow unintentionally.
  • Use the Navigator panel to confirm the stacking order.
  • Make sure the slideshow’s z-index is high enough if it’s intended to appear in the foreground.

5. Audit for Custom Code Interference

  • Open Project Settings > Custom Code and review any global or page-level custom scripts.
  • Faulty JavaScript interfering with display or DOM manipulation can hide elements unintentionally.
  • Disable custom code temporarily and republish to test if the slideshow appears.

6. Verify CMS Content (if used)

  • If the slideshow pulls images or content from the CMS, ensure CMS items are:
  • Published
  • Meeting any Collection List filter conditions
  • Not empty or excluded by visibility rules

7. Clear Cache or Use Incognito Mode

  • Browser cache or extensions may interfere with loading.
  • Test the live site in Incognito Mode or a different browser to rule that out.

Summary

To fix a Webflow slideshow that’s not showing on the published site, verify visibility, interactions, custom code, and ensure proper republishing. Most often, the issue stems from hidden display settings or an interaction hiding the component at page load.

Rate this answer

Other Webflow Questions