Slider with squared images

How To
1

I’ve prepared a series of images perfectly squared and I’d like to insert them in a slider that should show them entirely, but I’ve have this:

Screenshot 2021-11-22 at 13.38.30
Screenshot 2021-11-22 at 13.38.301262×1114 189 KB

The slider is into the right column…

Screenshot 2021-11-22 at 13.45.39
Screenshot 2021-11-22 at 13.45.393170×1176 417 KB

thanx

2

Hi Aldo,

add the following CSS to your Slider Element and change the slider height in Content » Settings to “auto”.

.bricks-element-slider .slider-wrapper {
  aspect-ratio: 1/1;
}

Best regards,
timmse

3

Hi @timmse and thank you for your help.
I added to you code the root part because in the same page I’ve another not squared slider, anyway, it seems to work perfectly in builder mode:

Screenshot 2021-11-23 at 10.08.54
Screenshot 2021-11-23 at 10.08.541236×618 138 KB

while in preview mode the slider is a little bigger and goes out of the container:

Screenshot 2021-11-23 at 10.07.43
Screenshot 2021-11-23 at 10.07.431330×749 137 KB

Any idea?

4

Maybe you’ve set the containers to stretch and your content container on the left is higher than the perfect square would be because of its content. So the slider grows with it… I’m just guessing - can you provide a live link?

5

Hi, maybe I found a way to fix it changing some property of the parent container. Honestly I don’t remember what I’ve changhed :thinking:

Thanks again!

6

Hi. I’ve just updated Bricks from 1.3.7 to the latest 1.4.0.2 and now the 1/1 aspect ratio does not work anymore, BTW it’s seems to work in the editor preview but not on the real rendering of the page.
Is there something I can do? Thanx.

Here the page: ristorantedatondo.com

7

Hey Aldo,
the class names have changed:

.brxe-slider .bricks-swiper-container {
  aspect-ratio: 1;
}

Best regards,
timmse

1 Like