Webflow sync, pageviews & more.
NEW

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 slideshow and container visibility settings, ensuring they’re set to Display: Block/Flex and Opacity: 100%.
  • Verify slides contain content and aren't hidden by interactions, responsive settings, or missing scripts.
  • Confirm usage of Webflow's built-in Slider, inspect for JavaScript or console errors, and republish the site after cleaning up.

If your Webflow slideshow is visible in the Designer but not displaying on the published site, it's likely due to missing content loads, incorrect display settings, or script issues. Here’s how to troubleshoot and fix it.

1. Check Element Visibility Settings

  • Ensure the slideshow component is not hidden via styles or interactions.
  • In the Navigator, select your Slideshow wrapper and check that it's set to Display: Block or Flex and Opacity: 100%.
  • Verify there are no page load interactions that unintentionally set the slideshow or its container to Display: None or Opacity: 0%.

2. Review the Slide Content

  • Each slide should have at least some visible content like text, images, or a background color.
  • Empty slides or slides with incorrect position settings may render invisibly.

3. Confirm Slideshow Component Functionality

  • Double-check that you’re using Webflow’s built-in Slider component and not a custom setup.
  • If you’re using custom code or third-party sliders, confirm those assets are correctly hosted and loaded.

4. Check for Missing Script Loads

  • If you’re using custom JavaScript, ensure it’s wrapped in a DOMContentLoaded or Webflow.push(function() {...}) block so it doesn’t execute before Webflow loads.
  • Ensure nothing is blocking the core Webflow scripts (like ad blockers or CSP headers from a reverse proxy).

5. Inspect Responsive Visibility

  • In the Style panel, check the Visibility settings under the Layout section across all breakpoints.
  • Sometimes components are accidentally hidden on desktop or mobile (e.g., Display: None on a specific breakpoint).

6. Clean and Republish

  • Try clearing unused classes and removing any conflicting interactions, then republish your site.
  • Use Publish to Selected Domains to overwrite the current live version instead of just Save/Preview.

7. Use Browser Developer Tools (DevTools)

  • Open your published site in Chrome, press F12, and inspect the slideshow element.
  • Look for inline styles or hidden classes like .w-hidden, display: none, or scripts throwing errors in the Console tab.

Summary

If your Webflow slideshow is not appearing live, but works in the Designer, check for visibility settings, interactions hiding elements, missing content in slides, or custom scripts interfering with Webflow’s functionality. Most often, the issue is hidden content or slides accidentally set to Display: None on publish.

Rate this answer

Other Webflow Questions