How can I fix the issue with my Webflow slider where the image is not displaying full-width and is showing part of the next image? Here is my site's Read-Only link: <br> ().

Your Webflow slider image is not displaying full-width and is revealing part of the next slide due to layout or overflow issues in the slider, slide, or image container components.

1. Check That the Slide is Full Width

• Select the Slide element within the slider and check the Style panel.
• Make sure its Width is set to 100%.
• Remove any fixed width or padding that would restrict the full width.

2. Set Overflow to Hidden on the Slider

• Select the Slider component, go to the Style panel.
• Set Overflow: Hidden to prevent the next slide from showing.
• Also check the Slide Mask, usually it's a div wrapping the slides with class w-slider-mask. Make sure its overflow is Hidden.

3. Validate Your Image Size and Fit

• Select the Image inside the slide.
• Set the Width to 100% and Max Width to none.
• Set Object Fit: Cover or Contain, depending on desired effect, and make sure alignment is set to Center.

4. Check Wrapper and Parent Section Settings

• If your slider is inside a container or section, ensure those wrappers are also full width.
• Check that no extra padding or margin is causing the layout to shift or shrink.

5. View in Preview and Resize Responsively

• Use Preview mode to test slider at all breakpoints.
• Adjust layout settings at Tablet and Mobile views as needed to maintain full-width behavior.

Summary

To resolve the issue of an image not displaying full-width and part of the next image showing in a Webflow slider, ensure the Slide and Image are set to 100% width, and that both the Slider and Slide Mask container have Overflow set to Hidden. Double-check surrounding structure for unintentional layout constraints.