Carousel | Slides with individual object-fit

[mp]

Hi there,

is it possible to adjust the object-fit of individual slides?

I know how there is a way to customize the individual background-color with this:

.lay-carousel-slide:nth-child(4) {
    background-color: #000;
}

But is there a way to adjust the object-fit like this? Would be great if it then would also apply to only a specific carousel ...

Thanks!

[mariusjopen]

Dear @mp
yes. You could use this. Then you need to address the element within.
Can you post a link to your website?
We will then have a look and inspect that!
Many wishes!
Marius

[mp]

hey, thanks for the answer.

... well the website right now is this: http://runningwater.eu, but there is not much to see, except a slightly modified carousel (it never is higher than its width – for mobile).

the use case would be for images that have a centered area of interest vs. images that are easily cropped. so for example a book spread vs. an installation view. the book spread would need to be centered and preferably never cropped (object-fit: contain;) and the installation view could be cropped and should fill the frame (object-fit: cover;).

an amazing additional idea would be to add a background image to the images that are contained. This way the slide could be a png with a transparent portion that is always completely visible, with a background-image that is ‘cut‘ to size – this would be a killer feature for portfolio oriented carousels.

thanks so much, laytheme has really been a lifesaver on tons of projects. :-*

[mariusjopen]

Dear @mp
thank you for using LayTheme!

Yes, The transparent background image could be an idea!
Best!
Marius

[mp]

Dear @mariusjopen

thank you – do you maybe have a pointer for my original question? that would be awesome!

[mariusjopen]

Dear @mp

.lay-carousel-slide:nth-child(4) img {
         object-fit: contain !important;
}

I was not able to test it , but something like this should work.
Best!
Marius