Fullscreen Slider max-height for multiple elements

[leoncov]

Hello,

I've been using the Carousel Addon to show slideable images with a specific height. Now I'd like to be able to show multiple images at once as well as have the option to use the arrow keys for navigation even when using a fade transition.

The Fullscreen Slider Addon seems to be the perfect solution, offering both of these things. However I've now run into a problem that I cannot solve and would be happy to get some help with:

When placing a sigle image I use the options for the Addon to center the image and give it a height of 95%. Now I'm trying to place a second smaller image on the left at the same time and thats where I fail...

You can find my test project here: https://leonbricola.com/lionnesaluz/

So far:
– I've placed both images in a browser-height row and scaled the right image up.
– The right image now is displayed way to large and is cropped at the bottom (slide 2).
– I then tried to scale the image down using a css class (bildhoch). At first the image gets squished (slilde 3) but setting the width to auto seems to solve ths problem (slide 4).

Now I'm left with the following problems:
– The image on the left stays placed as in slide 3 but I'd like it to stay centered vertically as in slide 2.
– The image on the right gets scaled down only on the right side, the left edge stays where it was. I'd like to have it scale down on both sides. And this image isn't centered vertically either but placed on top.

So basically I'm trying to apply the max-height setting to multiple elements in a row:)

Does anybody know how to do this? Or is there maybe a better alternative than using the fullscreen slider? I am happy for any tips.

Best,
Leon

[arminunruh]

@leoncov said in Fullscreen Slider max-height for multiple elements:

use the arrow keys for navigation even when using a fade transition.

this works with the carousel addon if u update now

well i would advise you to put both images into one image file and then just place that in your grid

[leoncov]

@Armin-Unruh thank you for your answer!

Ok thats good to know about the carousel addon

And for the fullscreen slider – do you think you might be implementng the option to set a max height for rows with multiple elements as well? Because the workaround with putting different images in one file will be very tiresome especially since the images should be separate for the mobile version…

Thanks,
Leon

[leoncov]

I now kind of go it to work by giving the large (full height) image the following css:

max-height: 95vh;
max-width: 76vh;
transform: translateY(2.5vh) !important

That seems to work but now the slider cannot be navigated forward when clicking next to the image…

maybe somebody has an idea?

[arminunruh]

do u mean here?

https://leonbricola.com/lionnesaluz/

well im not sure if im going to code it i have to think about how to best solve this

[arminunruh]

so i have never used this feature and im not entirely sure if this would even work

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

but maybe giving rows on desktop an aspect ratio will prevent them from getting too wide, thus preventing its content from overflowing

[leoncov]

@arminunruh said in Fullscreen Slider max-height for multiple elements:

do u mean here?

https://leonbricola.com/lionnesaluz/

well im not sure if im going to code it i have to think about how to best solve this

Yes exactly, in the second slide with two images.

Thank you so much for the link and hint, I will look into this!

Meanwhile I stumbled over a website (not using Laytheme) that seems to have a similar layout/behaviour but I haven't looked into their code yet: https://geordiewood.com/projects/portraits-01/5