Cannot figure out slider issue

I have tried and tried to work with the Slider
— and I cannot make it work correctly… I must be doing something wrong.

Width of all 3 images is slightly different - but not overly… height for all 3 is 1400px.

Here’s just a oouple things I tried:
Image 1 Width 100% - Height Auto
Image 2 Width Auto - Height 100%
Image 3 Width Auto - Height Auto

Image 1 - if the screen is to narrow… the image is badly distorted.
Image 2 - if the screen is wide… the bottom of the image is not displayed.
Image 3 - doesn’t stretch to the width of the screen if the screen is expanded.

Advise appreciated.

Link Below:

https://webflow.com/design/sec-proto-2?preview=3c2cc7ea9445b260c0fe925b59d2a8ac

try to use images as background and use the cover option.

you’ll need to create a class for each image, but it will work perfect in any situation.

thanks for replying.

I already tried… notice that it cuts off the bottom of image 2 and much of the bottom image 3… which are the “most important parts” of image 2 and 3.

Image 1 comes out fine. until you fully expand the screen - which then screws up all 3 images.

EDIT:
Also - on a side-note… I’ve encountered 1 bug with the slider (several times)

After creating a element and providing a class (example: sld_Hero… I can select the element and see the newly created element / class name in Current Selector field - with appropriate settings that I created… but everything is dimmed and message is displayed - stating Editing requires at least 1 class… etc.

Should’ve - but did not get a screenshot. Fix required that I exit the Designer to Dashboard. Returning to the Design corrected the issue.

2 more strange issues with the Slider

I have 2 sliders - both set to 400px Height.
Notice bottom box - it is more than 400… I measured it at 500px… both elements have different class names.

Also… when to create the Slider - the application automatically creates the Slider 1, Slider 2, Slider 3 classes.
Where are they on the top slider ?

You need to share your public link if possible to be answered on this last one.

same link as provided above - however…
I’ve already deleted and recreated the element several times.

https://webflow.com/design/sec-proto-2?preview=3c2cc7ea9445b260c0fe925b59d2a8ac

Sorry I didn’t realize. There, I can’t see the structure of the screen capture…

no worries - I just appreciate the help…

I just figure something out… if drag & drop and image onto the Slider

  • the application creates the Slider1, Slider2, Slider3 classes

If you don’t drag&drag - and view the classes for the slider… you will see Image1, Image2, etc.

Renaming the Image1, Image2 class is how I got around the creation the Slider1/2/3 classes.