Full screen carousel with max width of content

[ryanbartaby]

Hi,

I’m trying to create a full screen carousel for a homepage, but I’d also like the whole site to have a max width. At the moment I can’t get both to work at the same time and I have a few snags with the full screen carousel.

I’m essentially aiming for something that works like: this (with carousel captions, slide numbering and parallax), but with a max width for the whole site.

I’ve followed this thread and have got the full screen carousel working. But it’s missing the captions and slide numbering (which should be on top the carousel) and I had to turn the max width off to get it work.

Turning on parallax on the carousel also made the captions separate, well below the carousel itself. But I’m also not sure if I'm using parallax there correctly; should I set the content below to have a faster y-parallax speed?

So in short, I’m looking to have:

1. Full screen carousel, on one page (‘home’), with captions and slide numbering.
2. Set a max width for the content and menu, across the website.
3. Use parallax to ‘cover up’ the full screen carousel

Thanks

[mariusjopen]

Dear @ryanbartaby
Can you post a link to our website?
Then we can have a look and inspect that.

Marius

[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?