Using carousel feature as a cover (or full row bg image)

[dani]

Hi Armin,

I'm wondering if there is a easy way to combine the code for a carousel and cover feature.
ie. I want to have a fading slideshow that functions just a cover (fills the browser width and height).
Or if there is a way to adjust the carousel with css so it adjusts to 100vh/100vw, that could work too.
(something like an option on the carousel instance 'use as full row bg image).

Here is the carousel without left/right margins, but there is still a bottom margin but the browser edge is as an absolute boundary, unlike a cover or full row bg image.

http://visuel.org/sg

Thank you!
Dani

[mariusjopen]

Hi Dani,

until now there is not an official feature for that option.

But what you can do is the following:

Add a custom class to your carousel. You can do this by right clicking on the carousel image
Then give the carousel a custom class like carousel-full.

Then you can add a custom CSS code to your theme:

.carousel-full {
    height: 100vh;
}

.lay-carousel.sliding {
    height: 100vh;
}

.col .lay-carousel img.h100 {
    object-fit: cover;
    height: 100vh;
    width: 100vw;
}

The code above is maybe not compatible with all Browsers. For example Internet Explorer has trouble using those CSS styles.

Then the carousel has the window height and width.
Try to keep all the images with the same aspect ratio. Which means they should all have the same height and width.

I hope I was able to help. If you have further questions – please let us know.

Enjoy your weekend!

Marius

[dani]

Thank you Marius,

as it's not working with the proportions (like a cover) I'll use another solution and maybe you can include this feature in future updates.

Best,
Daniel

[mariusjopen]

Hi Daniel,

all right!
If you have questions – you can always let us know.

Have a good week!

Marius