Add a Slideshow Header to your Squarespace 7.1 site ⚡️ with copy + paste code

[@triciasuriani2379]

Hi again Erica - I solved the issue by using the section ID + your custom code. Thanks so much for your tutorial!

[@jamesscott1009]

very helpful, saved me some frustration. Thank you

[@AnnieJulian]

Thanks! This was an amazingly simple and well explained tutorial. Helped a lot! Love, Annie

[@calebdegabriel6743]

This was super helpful thanks. Maybe you can also explain, is there a way to add text over the top of the carousel? So you can add a headline to your homepage header.

[@BigCatCreative]

Not natively with this technique. You could use CSS to do this. But if you want complete freedom, I'd recommend this plugin www.will-myers.com/products/p/sliding-image-banner

[@maggiebergman]

Another fabulous tutorial Erica, thank you! I don’t know how well I would have been able to set up my Squarespace without you!

[@BigCatCreative]

So happy to hear that!!

[@anjaemzen5507]

THANK YOU!!! This was exactly what I was looking for! I don't know anything about coding so this was such a huge help

[@PaisleyPeach12]

Absolutely fantastic, thank you this is brilliant!!!

[@jackiedragonfly2461]

Love this! Thank you 😊Subscribed right away!

[@MrAjjhad]

Great tutorial, thank you. Are there some special settings for the header so the custom CSS works? Because in my case nothing happened, unfortunately.

[@BigCatCreative]

Hmm no, it should work. Are you using 7.1? Did you Save + Refresh after inputting your CSS?

[@Micksflix-dd3zh]

The fading option is just for the gallery to initially load, it doesn't control fades between slides. Be great if there was an option to control this as the first slide fades in, then it's a harsh immediate transition between Slides.

[@BigCatCreative]

I always thought it was to control between slides. Did you save and view the page out of the editor? Maybe it's just now showing it correctly in the editor

[@Sara-k-r-216]

This was great, thank you! Do you by chance know the code to put a gallery block/text/buttons on top of this slideshow? I know it requires custom code, but I don't know what the code is.

[@BigCatCreative]

Sorry it's not something off the top of my head. Maybe Google it, look for a Plugin or ask in the Squarespace Forum!

[@PiaSteimann]

Thank you so much for that tutorial! :) Do you also know how I could also add a caption/headline on the picture not below? Thanks a lot!!

[@BigCatCreative]

This is only possible with custom code! If you want us to set it up, you can contact our extra support service bigcatcreative.com/extra-support OR you can ask Google, OpenAi or ask in the Squarespace Forum! :)

[@DLCA13]

Great video. Thank you very much. My header its floating on the images, but i have a kind o white background on it.... how can i remove it?

[@BigCatCreative]

Make sure you're adding the image as a background (section background) image instead of an image block. Hopefully that helps but otherwise, send a message to our extra support team and they can help you bigcatcreative.com/extra-support

[@erictorbet8104]

Thank you for this. Is there a way to make one of the gallery images a video?

[@BigCatCreative]

Hey! You could try to make it into a GIF as this can be uploaded into the gallery!

[@michelleuziel1568]

Hi - this video was so helpful. I'd love for the photos to go all the way to the top of the page, however, the code didnt work for me. Also, is there a way to add a block to this section? I want to add text over the photos

[@BigCatCreative]

The code is still working for me so make sure that you are following the exact way I set it up. Unfortunately you can't add blocks on top of Gallery Section but you could instead maybe use a LIST Section (instead of Gallery Section) and use a Slideshow which you can then have text on (this video has info about adding LIST sections kzbin.info/www/bejne/gqLPgKKNfLGhfKM) though this code to put it behind the header here won't work as it's for a Gallery

[@BelindaDenney]

Hey, thank so much for this tutorial. I have imputed the code multiple times, but nothing changes. Do you know what I could be wrong?

[@BigCatCreative]

No sorry! It's hard to troubleshoot via youtube comments. The code definitely still works. We can help you via our extra support service if you need bigcatcreative.com/extra-support

[@isaiahnorton9833]

Thank you for the tutorial! Is there a way to add text on top of the gallery images?

[@BigCatCreative]

Not natively, but you could look into some custom code to achieve this!

[@creo-marketing]

How do you put individual text boxes overlaid on top of each gallery image? On the homepage, gallery images typically require a text headline for context.

[@BigCatCreative]

Not possible with a standard Gallery Block, maybe with Gallery Block + some custom code though!

[@lilsizzly1982]

How do we use videos instead of photos, or a combination of both videos and photos?

[@BigCatCreative]

I believe this only works with photos. Here's the info about adding videos: support.squarespace.com/hc/en-us/articles/206542397-Adding-videos-to-your-site?platform=v6&websiteId=62b0fe94847f4a6bcb77ed95 Or you can use this great Plugin by Will Myers www.will-myers.com/products/p/sliding-image-banner?peachs_apc=erica-hartwick

[@promiseofjusticeinitiative]

Is it possible to re-write this code or use this code to work with a banner slideshow? I would like for people to be able to read the headline of a blog post and navigate from the header?

[@BigCatCreative]

You can possibly use code to bring up the Image Caption/Title and add a link though it's not something I know off the top of my head sorry. Maybe try this! kzbin.info/www/bejne/pZSWdqKui6p5aNU

[@DanielleDyche]

Where can I find this custom CSS code?

[@BigCatCreative]

Squarespace has moved things around - easiest way to find anything now is to hit SLASH on the keyboard which will open search. Type in CSS :)

[@jeanphildu57]

Unfortunately it doesn't work for me either. Even after refreshing the page.

[@rudyortega3285]

how to do you change the vertical height on mobile? It just looks like a huge skinny vertical image. I want to see the correct 3:2 ratio of my slideshow.

[@BigCatCreative]

You can also do this with some custom CSS. Try something like this and you can adjust the "60vh" number @media screen and (max-width: 640px){ .gallery-fullscreen-slideshow { height:60vh !important;}}

[@peteaguirre2013]

will this work for the mobile view also?

[@BigCatCreative]

Yes!

[@lefthandright01]

since this upload squarespace has removed many of the features used in this and the tutorial csnt be followed, or even matched anymore.

[@rudyortega3285]

How do you do this to only the homepage?

[@BigCatCreative]

Watch this :) kzbin.info/www/bejne/nmnUl42alqaHmLc

[@SonjaMiro-d6c]

it didnt work for me im struggling :/

[@HeadphonesBrasil]

Worths well, but the only sad is you cannot abble to put any other actions, like butons, yeah?

[@aimeeluna1223]

Oh my GAWWDDD I’ve been looking for this!!! 🫶🏼 thank you thank you!!