Adding a full bleed slideshow on homepage (including header)

Hey friends! 🙂

What is the best way to add a slideshow to the homepage opening? I need it to be the first thing you see when you go to the site. Full bleed and for it to also be the background for the header (navigation + logo etc).

I would provide the URL, but I've literally only started it today so it's just the template (Lusaka)

Thank you in advance.

If you add a gallery section at the top of the homepage and height set to L, that should get you what you want. You'll also want to set the header style to dynamic.

Slideshow: Full - A full-bleed slideshow that displays one image at a time

Let me know if that was helpful and how you get on.

Hey! Thanks for your reply. Unfortunately this isn't working 😞 It will only bleed onto the navigation + logo (even with it set to dynamic) if i add a background image to that gallery section, see attached for more explanation. Any other ideas?

This worked perfectly! Thank you!!!

Fantastic! Thanks for marking my post as the solution, if you can give a thumbs up too that would be brilliant!

How exactly do you do this? I am having the same issue and am not familiar with coding or anything:)

On 4/29/2023 at 9:18 PM, Isaiahshomeservices said:

How exactly do you do this? I am having the same issue and am not familiar with coding or anything:)

If you share link to your site, we can check easier

Great solution, thanks! But let's say I want a nice centered headline that floats in the slideshow, what CSS does that require? See attached screenshot for desired result. (I think all of the above works except the title.)

3 hours ago, Mannen_i_hatten said:

Great solution, thanks! But let's say I want a nice centered headline that floats in the slideshow, what CSS does that require? See attached screenshot for desired result. (I think all of the above works except the title.)

Can you share your website URL and this page?

Yes I can give you all a short window in time, like a day or so, on this password protected site (without the slider): 

kaptensgarden.squarespace.com

Password: Sqsp9867

The idea is to change the top section slider on the initial page – for which I use a parallax, (guess I have to ditch that going with a slider solution). 

The CSS code I have been experimenting with so far to get this to work is the following, but I can't get the typography to work properly because I have not been able to get it responsive due to lack of knowledge and research, see also my comment in code: 

section[data-section-id="662651f55d674b51fcd36d91"] {

  padding-top: 0px !important;

  position: relative; 

  height: 100%; 

}



[data-section-id="662651f55d674b51fcd36d91"] .gallery-fullscreen-slideshow:before {

    content: "Drömkök för livet";

    display: block;

    text-align: center;

    width: 100%;

    position: absolute;

    top: 50%;

    left: 0;

    z-index: 10;

    font-family: inherit; 

  font-size: 78px;  /* Here I also can use the variable for the H1, but then it gets too small */

    font-weight: var(--h1-font-weight); 

    color: var(--h1-color);



}

12 hours ago, Mannen_i_hatten said:

Yes I can give you all a short window in time, like a day or so, on this password protected site (without the slider): 

I don't see the slider. I can't offer much if I can't see the problem. Alternatively this plugin is good and would allow you to use parallax on the sections:

https://www.will-myers.com/slider-pro-demo

Sorry I was unclear, should have said I temporarily removed the slider so as not to confuse the customer, just wanted to show you how I wanted it to look.

Now I have reinstalled the code again in case you want to take a look. Same URL, same password. And I think I got it working now, found some CSS-code to be able to make the font responsive for different screen sizes.

Otherwise, thanks @Ziggy for the link to Will Myers plug-in, he has good stuff. I will check later if it fully solves my problem, looks promising. I I'll need it. Maybe it is better to use plug-ins that are maintained and updated? 

Anyhow: here is the code for how I finally solved it with my own CSS, but I'm always afraid when implementing that I'm doing something that will cause trouble in the future. Feel free to comment if you spot any bad coding. 

section[data-section-id="XXXXX"]

section[data-section-id="XXXXX"] {
  padding-top: 0px !important;
  position: relative; 
  height: 100%; 
}

[data-section-id="XXXXX"] .gallery-fullscreen-slideshow:before {
    content: "The Headline Of Your Choice";
    display: block;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;

    /* Default H1 styles, override as needed */
    font-family: inherit;
    font-size: var(--h1-font-size); 
    font-weight: var(--h1-font-weight);
    color: var(--h1-color);

    /* Responsive Typography Adjustments */
    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {
        font-size: 78px; /* Larger size for desktop */
    }

    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) and (max-width: 991px) {
        font-size: 68px; /* Moderate size for tablets */
    }

    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) and (max-width: 767px) {
        font-size: 58px; /* Smaller size for landscape phones */
    }

    /* Extra small devices (phones, less than 576px) */
    @media (max-width: 575px) {
        font-size: 48px; /* Smallest size for small phones */
    }
}