Jump to content

Carousel Header Image

Go to solution Solved by paul2009,

Recommended Posts

Hi!

I'm looking to add a carousel of images to my header on my homepage only.
Is there an easy way to do this?

It needs to run behind my logo and menu (as shown in the images) and I want it to auto-transition between 3 images.

I'm working in fluid editor and the tutorials I've found about this subject seem to be outdated now.

Thanks so much guys!

Screenshot 2023-02-01 at 19.07.22.png

Screenshot 2023-02-01 at 19.08.23.png

Link to comment
  • Solution
18 hours ago, GBD said:

I'm looking to add a carousel of images to my header on my homepage only.
Is there an easy way to do this? It needs to run behind my logo and menu (as shown in the images) and I want it to auto-transition between 3 images.

@GBD @Nacole You should be able to create a full-bleed slideshow as follows:

  • Add a Gallery Section to the top of the page.
  • Set the Gallery Type to Slideshow: Full.
  • Set the Width to Full Bleed.
  • Toggle Autoplay on.
  • Set the required Slide Duration.

image.thumb.gif.c5febe6ca18879ca9412c30c10c3de3e.gif

If you'd like it to close-up behind the header (like the example above) then you'll probably need a line of CSS to achieve this. I have provided an example below. 

[data-section-id="abcdef1234567890abcdef12"] {
  padding-top: 0!important;
}

You'll need to swap the Section ID placeholder that I quoted for the Section ID of that Gallery Section you added. If you need help finding the ID, please provide a working link to the page after you've added the section.

Did this help? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment

Thanks @paul2009 

Is there a way this works in 7.1? As far as I can see there is no gallery option. 

I currently have a Banner Slideshow which works great  to display a header, text and a button.  But no option for Full Bleed into the header.  Or automatic slide change.

Link to comment
1 hour ago, Nacole said:

Is there a way this works in 7.1?

Those were screenshots and instructions for 7.1 🙂.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment

@paul2009 when I go to add a new section, Gallery is not an option.  I can add a gallery from the Images section but when I do that, I don't have any of the options that you have for full bleed, auto play etc.  Sorry, I feel very dense but I'm clearly missing something.

Attached is the only options I have for modify that section:

Screen Shot 2023-02-03 at 12.13.52 PM.png

Screen Shot 2023-02-03 at 12.14.05 PM.png

Link to comment
5 minutes ago, Nacole said:

when I go to add a new section, Gallery is not an option.

Confusingly, Gallery sections can be found under Images

You can add a new section to any (standard) page by clicking the blue ADD SECTION button (see below).

                    image.png.0df7415e44d891349e43178b62569b63.png

The Section Catalogue should then appear (see below). I have highlighted the Gallery Section with the full bleed slideshow options.

image.thumb.png.0c98d9838e103ec5c1aaef75e5fbdab3.png

Did this help? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment
4 minutes ago, Nacole said:

never mind, I figured it out!

No problem, I'm pleased it is working. Sometimes there are just too many buttons!

For the benefit of anyone else, the options can be reached by the EDIT SECTION button, not the EDIT GALLERY button (which I always click first by accident).

image.png.6855fb1d4d833b453f72610c01dfc271.png

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment

@paul2009 thank you for your help!

And just to make sure I'm clear with current functionality - is there a way to have a full bleed gallery with autoplay like you just talked me through but also have a Title/Description/Button like a Banner Slideshow allows?

Link to comment
18 minutes ago, Nacole said:

thank you for your help!

And just to make sure I'm clear with current functionality - is there a way to have a full bleed gallery with autoplay like you just talked me through but also have a Title/Description/Button like a Banner Slideshow allows?

You're welcome!

Auto layout sections - the ones that appear in the Section Catalogue with an "i" badge in the upper right-hand corner - can have titles/descriptions/buttons but, for some strange reason, Squarespace haven't added an autoplay option to these yet!

However you can add this functionality manually with some pretty straightforward code (JavaScript). To avoid duplication, here's a link to an article that @WillMyers wrote about this. 

Did this help? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

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.