If a slider image in Webflow is not being hidden on some pages despite having a visibility condition set to "hidden," it's likely due to a condition or style override that isn't applying as expected. Here's how to troubleshoot this issue effectively.
1. Check the Visibility Condition Settings
- Select the image in the slider and open the Element Settings panel (D key).
- Confirm the visibility condition logic—ensure it's correctly targeting the current page or CMS condition.
- Test the condition on affected pages. If it's based on a CMS item, make sure the CMS field value aligns with the conditional visibility rule.
2. Verify Page-Specific Overrides
- In Webflow, styles and visibility conditions can be overridden per page (especially with CMS templates).
- Go to one of the pages where the issue occurs and re-select the image inside the slider component.
- Check that the visibility setting is applied on that page—not just globally or on a different Collection Page.
3. Review Display Settings in the Style Panel
- Go to the Style panel, and ensure the image display setting isn’t set to something like Display: block or flex, which may be overriding the visibility condition.
- Double-check if the image is hidden via conditional visibility, but still being force-displayed through styles.
4. Inspect Interactions or Animations
- Open the Interactions panel and check for page load or slider-based animations that may be setting the image to visible.
- Look for any affect class or element settings that mistakenly make the image visible regardless of the visibility condition.
5. Publish and Clear Cache
- After making changes, always publish the site to both staging and live domains (if used).
- Clear your browser cache or test the issue in Incognito mode to ensure you're not seeing a cached version.
6. Test in Read-Only Mode
- If unsure about the settings or if anomalies persist, share your Read-Only link and test the project structure.
- Try duplicating the page or slider component and reapplying visibility rules to isolate whether the issue is page-specific or component-wide.
Summary
To fix a slider image that's not hiding as expected, double-check conditional visibility logic, inspect display styles, and ensure no interactions or animations are forcing visibility. Make sure you're testing the conditions directly on the affected pages and always republish to apply changes.