Carrousel in full window

[svimic]

Hello, I’m trying to have a carrousel displaying in full window.
The Hero Bloc has option for Full Window but only one image can be set.
Tried to enter an 100% value in height (through a custom class) for items in the carrousel but it is not working.
Any idea how to accomplish this ?

[Jerry]

Hi @svimic, Add a carousel to a bloc. Set padding of the bloc to “none” and width to " full width". On the row, uncheck “gutters” and load pictures to the carousel. Perfect picture size would probably be something like 1920px x 1080px.

[svimic]

Thanks Jerry but it’s what I did. Except that the padding for the bloc is set to “FullScreen” instead of “none”. I tried with “none” but result is worst because it doesn’t resize the bloc to the window size which is what I’m looking for. With “FullScreen” it does resize the bloc (hero) correctly but the carrousel inside the bloc not. The idea is that the images in the carrousel always display in full height, same as the CSS background-size “cover”.

You can see my original website here. The carrousel is full window. On my developing website with Blocs here, you can see that the image is full width but not height and centered vertically in the window. If the window is large, the image is higher than the window.

Note that if I don’t use a carrousel but a background image in the Hero bloc with padding set to “FullWindow”, this image is full window at any window size.

[Flashman]

I am doing something similar at the moment with a carousel and debating whether to go full width or smaller within the normal width limits, so it is aligned with the text above, as you see here:

The images are 1920x1080 and in this screenshot it was caught mid frame on a 32" display doing the same as Jerry suggested. You have some space at the top because of the menu bar.

If you have other blocs on the page like in your site or this case below with text and padding it will not fill the browser window vertically as a carousel, even when padding is set at full screen, because it has to allow for other elements on the page as we can see on your Blocs version. This is different from a hero bloc.

I haven’t tried this yet, but Swiper may be a possible option https://archetypon.net/preview/brics/swiper/demo/

[svimic]

Well in landscape mode, it displays correctly full page. But on screens and windows in Portrait mode, it breaks the full height and the carrousel is vertically centered as you can see in the link posted above.

As you said, Swiper might be an alternative

Thanks.

[PeteSharp]

You also have to allow for window resizing.

Setting the carousel images as BG images using cover is the easiest approach for a dynamic full screen carousel in my opinion.

[PeteSharp]

This should work… in the class editor make the following classes and add the styles.

This approach means you can just add images as normal to the carousel.

.carousel
height = 100vh
width = 100%
overflow = hidden

.carousel-inner
height = 100%

Then in the page header add.

<style>
.carousel .carousel-inner img {
   object-fit: cover;
	height: 100vh;
}
</style>

[svimic]

Great thanks, I keep your CSS code at hand. For the time being, I bought Swiper Bric and it worked at first attempt. Very straightforward.

Your code is also interesting. I wasn’t aware of the object-fit property. Same as background image but for objects. I was dreaming for this Is it a new addition to CSS ?

[PeteSharp]

@svimic

Same as background image but for objects

Pretty much, I am not sure when it was first supported. I’ve used for a while.