Slider - Full Width Image Issue

[uwired]

Hi all,

I’ve been trying to wrap my head around this slider issue for a little while now.

I’m trying to upload an image to my site’s slider and set it to show at full width; I want the image to display “as is”.

My image is 1600px x 579px.

IMAGE:
https://imgur.com/UUJFKj9

I’m doing the following:

1. Adding the Slider Nestable:

2. Adding a background image to ‘Slider 1 block’

3. Adding the height of my image to the Slider Nestable > Options > Heights section

MY STEPS:
https://imgur.com/a/PfLjNGP

The result:

The entire bottom strip of the image is cut off.

I’ve been able to do this previously in Elementor by just adding the image in, and I’ve spent a lot of time to try and figure where I’m going wrong in Bricks.

Any help would be appreciated!

[simon]

This might be the issue: DUPLICATE: Slider (nestable) not responding to settings. Seems the slide height is stuck at 50vh due to a bug.

[uwired]

Thanks for the response

I tested this out – by duplicating my slider and then adding 50vh to the height of my slider:
https://wordpress-850159-4509389.cloudwaysapps.com/

The first slider is set at 579px, and the second at 50vh. They both look like they’re different sizes.

Do you think it’s a bug?

Any way you know of “fixing” the slider to show 100% of the content of the slide, whilst being full width?

[simon]

Ah, you’ve added the image as a background to the slide (sorry hadn’t noticed that). Adding it as a background won’t make the image size correctly. Remove it as a background and then add an image element to the slide and then pick your image. You can then set the image object-fit to cover, the height and width of the image to 100%, flex grow to 1 (for safari) and the slider height to auto and it should work.

[uwired]

Thank you!

I’m glad it was something silly on my side and not a bug.

I couldn’t get it to 100% work using the instructions you gave, but I got a full-width slider with some scaling quality loss, but I’m glad I’ve got something of a solution.

I’ll leave what I did here, in case it helps someone like me out

I did the following:

1. Added in the Slider Nestable

2. Added the Image element

3. Added my image under content, and changed the quality to ‘Full’

4. Toggled ‘stretch’

5. Under Slider (Nestable), set the Height to 100%

And now it’s full width (although it is scaled up, so loses a bit of quality).