Transparent Header with Hero Slider

[itsmikesch]

Is there an option to change the static hero image into a slider without the use of Swiper3?

[PeteSharp]

There is a full screen carousel bric.

[itsmikesch]

Great! I can’t seem to puzzle this into my current design. Any help with instructions on this?

• I tried adding a Structure 1 column, then added the carousel.
• Changed the Structure 1 column Bloc padding to Fullscreen, and full width.
• Added pictures to slide.
• This is where I get stuck, the carousel is not fullscreen in height, and doesn’t reach the end of the screen either the left or right side.

Any ideas?

[PeteSharp]

Oh my bad, its full width. You will have to modify it for full screen.

Posted a solution a while ago about this.

Carrousel in full window

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>

You can put that last bit of CSS in the CSS input zone in the code editor, instead of the page header.