Full screen carousel with max width of content

[ryanbartaby]

Sure: https://twodesign.dreamhosters.com/

Thank you

[ryanbartaby]

Hi @mariusjopen

I’m almost there after using the ‘Cover’ feature, which got the parallax working. But the carousel captions are still missing and I can’t get it to be full screen while setting a max width for the rest of the site.

Thanks

[ryanbartaby]

Hi @mariusjopen

I’m still trying to work out some of the snags but I’m one step closer: I removed some custom code from the other forum thread that I referenced in my original post, which has almost returned the carousel captions. But I then loose those captions if I set the carousel to ‘Align Middle’. On larger screens the captions reappear but the images aren’t filling the browser.

I’m also still trying to make the image fill the browser while setting a max width for the rest of the site.

Thanks

[mariusjopen]

Dear @ryanbartaby
can you use the CUSTOM CSS to stretch the height of the carousel to 100% and to move the captions up?

Best!

Marius

[ryanbartaby]

Hi @mariusjopen

I’m not sure I understand. The carousel fills the height of the browser fine using the Cover feature, but I don’t know how to move the captions up – I can’t see them anywhere at the moment.

I’d also like to fill the width of the browser with the carousel images – at the moment they stop short at the sides because I have a max width set to 1700px. But I’d like the images to fit the width of the browser.

Thanks for your help so far.

[mariusjopen]

Dear @ryanbartaby
the thing is that you need to play around with the CSS.
You need to give the slideshow or the image in the slideshow a width of 100vw and a height of 100vh.
Probably you need to give the image itself an object: cover.

It is try and error. No real magic. All possible.

Best!

Marius

[ryanbartaby]

Thanks @mariusjopen

I can’t find the correct ID using Inspect in Chrome (or should I be looking for a class?) for the carousel in order to set the width to 100vw. I’m happy to play around with the CSS but have no idea if I’m selecting the right elements.

This is what I’ve tried adding to the custom CSS so far:

#lay-carousel-slide {
    width: 100vw;
}

I’ve also tried assigning an ID to the carousal in Gridder, but still can’t get it to work:

#carousel-full {
    width: 100vw;
}

I’ve made a copy of the homepage to test with until I can get it to work: https://twodesign.dreamhosters.com/home-2

Thanks

[mariusjopen]

Dear @ryanbartaby
try something like this:

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

.slide-inner {
    height: 100vh;
    width: 100vw;
}

.row.one-col-row {
    height: 100vh;
}

.lay-carousel-slide.lay-carousel-slide-img.transition {
    height: 100vh;
}

Best!

Marius

[Brant]

Hi Marius, unfortunatley It's not working for me either. Any other idea to make this work? thank you!

www.bodyandspace.de

[Richard]

Dear @Brant

Nice website :)

Since this thread was 7 months ago, is it possible to refine what you are after
What carousel area of your website do you wish to change? is it on the main page,

Do you need the captions and numbers to sit within the carousel and not below it?

Let me know

All the best
Richard

[Brant]

@Richard-Keith Hi Richard, thanks for coming back at me on this! I've actually put the max-width of the site to "0" now, so i dont have the problem anymore with the carousel. Originally I couldn't fit the carousel to 100%, as it would only go as far as the max-width. Hope that makes sense. Thanks and maybe you have a solution for this?