Image alignment in a slider

Hello

This is Sandra and I am new to the Forum and working on my first Webflow project. I have a slider on the website that I am designing that has three slides. Each slider contains 2 images. I put the images in a Div block inside of each slide. What I want is for the two images to line up next to each other in the desktop view and stack one on top the other in the responsive view. The problem I am having is the image from the following slide is showing up in the window of the slide before it. What do I need for my settings to be so the two images in the slider fill the div block so nothing from the next slide is seen? Also the slider and the images inside need to scale down as the viewport scales down. Thanks.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Sandra,

Can you share your read-only link? Does the problem show up in the designer too? Or just the live version of the website?

Cheers

Hi Kimmy
Thanks for replying. Here is my read only link https://preview.webflow.com/preview/adj-creations?utm_medium=preview_link&utm_source=designer&utm_content=adj-creations&preview=c160c2c5d076a5cc660149301019b080&mode=preview

Yes, the problem does show up in the Designer view as well.

Hi Sandra,

A possible solution would be to pre-edit the images before uploading them to webflow, specifically the size, if all images are the same size, there’s less room for problems to arise.
You can also set your images to auto size instead of a fixed “px” width size and then hiding overflowing content.

To set your image’s width to auto, check the highlighted checkbox and then uncheck it again, it will reset its width:
Untitled

To hide overflowing content, select the highlighted option:
Untitled2

Keep in mind that this can still make images look weird due to the fact that they’re not all the same size, hence the pre-edit tip.

Cheers

Thanks Kimmy for your suggestion. I will try that.