Jump to content

Automated slideshow with heading and make the slideshow show fully (also behind navigation bar) on homepage

Recommended Posts

Hi! 

On my page resinova.se I have two problems that needs to be sold with custom CSS. 

 

1. I'd like my current slideshow on the homepage to be automated, no arrows. I know how to do this, but it seems impossible to get a header then? Any solution?

 

2. I'd like the slideshow to cover the area up around the navigation bar, similar to mpam.se, instead of having a blue background behind the navigation bar. 

 

Thanks in advance!

Link to comment

@MndPThere may be more to do but this can get you started for transparency. This will make it only happen on this page. Now you should be able to use whatever extra code you're using to advance the slideshow and hide the buttons.

#collection-63caac95bc17ef45e7b44b10 {
  #page #sections .page-section:first-child {
    padding-top: 0px !important;
  }

  [data-header-style="theme"].header, [data-header-style="dynamic"].header {
    background-color: transparent !important;
  }
}

 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment
On 11/28/2023 at 5:07 PM, jaeveedee said:

@MndPThere may be more to do but this can get you started for transparency. This will make it only happen on this page. Now you should be able to use whatever extra code you're using to advance the slideshow and hide the buttons.

#collection-63caac95bc17ef45e7b44b10 {
  #page #sections .page-section:first-child {
    padding-top: 0px !important;
  }

  [data-header-style="theme"].header, [data-header-style="dynamic"].header {
    background-color: transparent !important;
  }
}

 

Perfect, thanks! So to get rid of the arrows I saw that there was a slideshow section that could be added (no CSS), however when I use that section I can not have a header over the picture. So either I keep the current section and with CSS creates a slideshow (without arrows), or I chose the slideshow and with CSS writes a header. 

Link to comment

@MndP I'm not sure I totally follow what you mean but with the code I gave you it should remove the background in the navigation and put the whole slideshow under it in your current setup (or atleast the one you had the other day when I looked). You mentioned already knowing how to do the automated slideshow part but something like this would probably do the trick with what you had before. It also has code to remove the arrows under the additional tweaks area.

 https://www.will-myers.com/articles/auto-scroll-for-carousel-banner-slideshows-for-auto-layout-sections-in-squarespace-71

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.