The Ultimate Guide to Carousels in Squarespace

[@Martin-ww4dh]

Thank you for this, it's really been the only way to get the design I want, and doesn't involve any heavy use of CSS!

[@breelentz1895]

You are fab! So so so helpful and I love the way you clearly and concisely explain everything, many thanks from a new designer taking on clients and figuring these things out as I go!!

[@Sam-de7mb]

you're a legend, Rebecca.

[@RebeccaGraceDesigns]

Thank you! Glad to help.

[@johnvanjura8]

Thanks helped a lot

[@jamescoulson3327]

Thank you for this Rebecca! Do you know if it is possible to create two slide shows next to each other? I'm trying to create two squares that consist of images that fade from one to another, that are clickable. Ideally, when viewed on mobile, the two squares would shift to above and below each other. Thanks!

[@elizabethwomack4829]

This is fantastic!! Thank you so much for sharing your knowledge ❤

[@RebeccaGraceDesigns]

You are so welcome!

[@chrisb9423]

I tried a few different CSS options to get the Slideshow:Reel to autostart and yours seemed to be the only one that worked. The only issue I have is that when the CSS is present in the footer, the images keep advancing even when in Edit mode. Each time a slide advances it also closes any option window that is open. For instance, if I am in a section and click ADD BLOCK the box of block option opens for me to select from but as soon as a slide advances the box closes. The only workaround I've come up with is to delete the CSS while editing and then remember to put it back or to edit the time interval in the CSS and then remember to change that when I'm done editing.

[@regalpublications]

I'm having this same issue. =[

[@sheiltjuh88]

Hi Rebecca, Loved this tutorial! I was wondering do you also have a tuttorial now that I have this slideshow that I can edit a text on top of the photo's? I made this slideshow as a site header but I want to edit a text and a button. Is this even possible? thank you already for you response. greetings sheila

[@pam7949]

Hi, @sheiltjuh88 this is what help me using the banner slide show. kzbin.info/www/bejne/eGeTaXeHo5qHfrMsi=_DesYuOOSMyWa6C2

[@omahej]

BRILLIANT!!

[@user-kw2ru7gw6g]

Thank you so much! This was so helpful.

[@RebeccaGraceDesigns]

You're so welcome!

[@regalpublications]

Hi Rebecca! I used the gallery carousel code. It works, but now it's not letting me edit sections on that page. I click edit section and it goes away after a second. Looks like it's disappearing every time the slide moves. Is there a fix for this?

[@paulbradley8876]

The only workaround I could find is to remove the code, edit the section, and the paste the code back in. A little bit annoying, but it works.

[@alohajurek]

Thanks a lot, Rebecca. Very helpful! I use the code for gallery carousels and have it injected in my general footer section. However, every time I try to edit anything on my website, that part also seems to be affected by the code, as after 3 seconds the part I'm editing kicks me out, so to speak. Does this make sense? Any way to fix this? 🙏

[@RebeccaGraceDesigns]

Make sure the code is in the Code Injection not in a block in the Footer. Also, try using the following code. I added in a section that will have the code only run on the live version of your site. (function() { var nextArrowGallery = document.querySelector('.gallery-reel-control-btn[data-test="gallery-reel-control-btn-next"]'); function clickNextGallery() { nextArrowGallery.click(); } if (window.location.href.indexOf("squarespace") < 0) { setInterval(clickNextGallery, 3000); } })();

[@demetrisgavrielides8878]

Hi Rebbeca, the tutorial was incredibly helpful! I was wondering if there was anyway to make the the autoplay stop if the mouse was hovered over the gallery. Thanks, Demetris

[@RebeccaGraceDesigns]

Hello! Yes, you would have to add a listen event for Mouse Over. I would be happy to help you with this during a 1:1 Help Session. You can find out more and book a call at www.rebeccagracedesigns.com/squarespace-help

[@allegrofilms]

Hi Rebecca, thanks for this, very useful. Is there a quick adjustment to the code if I want to affect the 2nd gallery on a page, not the first?

[@RebeccaGraceDesigns]

To target a specific Summary Block, add the Block ID to the code. For example, try changing this line... var nextArrowSummary = document.querySelector(".summary-carousel-pager-next"); to... var nextArrowSummary = document.querySelector("#BLOCKID .summary-carousel-pager-next"); and then edit for the block id of the summary block you want to target.

[@omahej]

@@RebeccaGraceDesigns Hi, I just wanted to say that this really helped me figure out a problem I had no idea how to solve so thank you so so much!!

[@Martin-ww4dh]

This is great thank you. Is it possible to move the arrows so they are on either side? Also how to go about editing the font style (italic etc) and size? Would be good to have the testimonial as a size/style and the author different? Many thanks

[@fashionupward6219]

Thank you so much!!! Very helpful information. Question- Where is the code located to inject into footer?

[@fashionupward6219]

Never mind! I found it and Subscribed ❤❤❤

[@taniaciolli-leach1084]

Hi Rebecca this is super helpful thanks so much. Are you able to post the 2 types of coding here as I couldnt see it on my screen. cheers Tania

[@RebeccaGraceDesigns]

Hello Tania. You can see all of the code used in the video at www.rebeccagracedesigns.com/blog/guide-to-carousels-in-squarespace

[@taniaciolli-leach]

That’s awesome, thanks so much 🥚

[@sarahburke6928]

This is great but what about for those of us not using 7.1? There is no option for 'advanced' in the settings and I'm finding this confusing how there's both a summary block and gallery block when the code keeps referencing summary. Just trying to get scrolling testimonials that's all 😓

[@RebeccaGraceDesigns]

Both of those blocks are available in 7.0. The menu may look a bit different but this code should work in both versions.

[@celinadecolle4485]

Hi Rebbecca, everything seems great, but I´m stuck in terms on how to make the carrousel display video instead of photos. Do you have info on this? Thanks a lot!!!

[@RebeccaGraceDesigns]

You may need a plugin to do this. Check out this forum. forum.squarespace.com/topic/231479-video-carousel-in-71/

[@HeadphonesBrasil]

Rebecca, thanks for your guides! You know if is possible to put a carroussel as a first page image, like background, with transparent menu? Because i just try to put a carroussel full image and my menu change the background even with the 'adapt' on :/

[@RebeccaGraceDesigns]

When you have a carousel as the first section, the header does not overlap it so even if you coded it to be transparent, it would only show through to your body color. You would have to add code to move the first section up under the header.

[@sawyerlife1020]

Hi Rebecca, thanks for the video it was super helpful. Is there a way to edit the speed of the transition? Or even just make it so it slowly just plays through them. Like a slow train running across? aha.

[@RebeccaGraceDesigns]

You can speed up the transition by changing the number 3000 to a smaller number. The 3000 represents 3000 ms or 3 seconds. To have it slide across you would need to change the transition completely which would require more complex code.

[@sawyerlife1020]

@@RebeccaGraceDesigns Yeah but i mean 3000 is the time of the pause. if i could control the timing of the move too it would be great! eg 3000(pause), 1000 (transition), 3000 (pause) any idea on a away this can be achieved?

[@ameliamcgoldrick7311]

Hi Rebecca! Thanks for this awesome video! Is there a way to change the colour of the text to be different for each image? I find I'm losing my dark header text with darker images. (I hope this made sense) Thanks!

[@RebeccaGraceDesigns]

You can use CSS to change the color of the text. If you are using the text overtop the image, I suggest adding an overlay to help the text stand out better.

[@naturolayemi4621]

Hey, do you also have the code for the gallery block? I only see it for the summary carousel. Thanks!

[@RebeccaGraceDesigns]

Which code are you looking for? To autoplay a Gallery Block?

[@ArgirisBothos]

Can i make a carousel / slideshow for product categories? And make it look nice on mobile too?

[@RebeccaGraceDesigns]

You could have a picture representing each category and then link each one to the product category page.

[@JennieCoulter-v6u]

Hey Rebecca, thank you for this! Is it possible to change the style of the navigation arrows? I don't want them at the top, but rather more like a button in the middle right hand side to toggle between? More of the type of settings a general gallery block has? Or is there a plugin/option that you know of that allows for this? I'm trying to showcase my services in a more "uplevel" style!

[@RebeccaGraceDesigns]

You would need custom css to do this. I would be happy to help during a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/squarespace-help

[@sofharutyunyan8101]

Hi Rebecca! Thanks for this info. Do you know if we can somehow select a few “pages” for the content in the carousel. I.E. If I want my carousel to have a little bit of each of the blogs I have posted (one from X folder, another from Y), is that possible?

[@RebeccaGraceDesigns]

Hello! At the moment you can only select one page at a time. However, you could use a Gallery Reel instead and manually add the thumbnails you want to showcase from each of the pages.

[@studiolezard]

How do you replace the photos? I can't find that function anywhere and you don't mention it.

[@RebeccaGraceDesigns]

When you go to edit, click on the Image Icon to edit the photos. Check out this article for more information. support.squarespace.com/hc/en-us/articles/360035636332-Gallery-sections#toc-add-images-to-the-gallery

[@reabo]

can you add links to the right to click and bring to a certain slide?

[@RebeccaGraceDesigns]

I don't think this is possible at the moment.

[@kevingianom]

Hi Rebecca, how can I change the background color as well as the color of the arrows of the controls (@1:55)?

[@RebeccaGraceDesigns]

To change the background color of the arrow you can use... .gallery-reel-control-btn::before { background-color: red; // color behind the arrow } To change the color of the arrow you use... .gallery-reel-control-btn { color: red; // color of the arrow }

[@kevingianom]

@@RebeccaGraceDesigns Thank you

[@NPark-ne4ii]

Hi Rebecca, thanks so much for this info. I was trying to insert a carousel gallery block and getting frustrated with the whole notion of having to point those images to hidden blog post pages. And without your code I probably would have been stuck for many more hours trying to figure that out as well! I'm new to Squarespace and little things like this are, quite frankly, baffling to me. Why can't the carousel gallery block simply allow you to upload images and create...well, a carousel gallery? Why does it instead have to point to other sections of the website and require code to not direct you there if clicked? It really doesn't make any sense to me. Anyways, thanks again for the tutorial - you saved me a ton of time and frustration!

[@RebeccaGraceDesigns]

Hello! If you want a carousel of images that do not click anywhere than choose the Slideshow Reel Gallery Section instead. The Summary Block Carousel is meant to send people to your collection pages (although some people use them for various creative other reasons as well).

[@NPark-ne4ii]

@@RebeccaGraceDesigns Unfortunately the Gallery Section is too clunky for the exact visual style I need (I'm creating a design portfolio and thus visual hierarchy is very important for employers to see). Your Summary Block "Testimonial Carousel" is the closest solution I can find that matches what I'm going for. After posting on the forums, it seems Squarespace 7.1 does not support gallery blocks (which do have regular carousels in them) on certain types of pages like portfolio sub-pages, which is what I'm trying to put it on. When I tried emailing customer support about it, they told me only Circle Members can add gallery blocks anywhere they like, which seems like such a slap in the face - essentially the solution exists, but only for superusers that oversee 3 paid sites?? I find that ridiculous and will not be returning to Squarespace once my subscription is over. Sorry to rant but I do appreciate your solution, yours was able to successfully circumvent this restriction and help a TON. Thank you!!

[@bzzinrnd]

CCS embed is a premium feautre my friend.

[@RebeccaGraceDesigns]

Yes, you need a Business Plan or higher to add any custom code to your site.

[@bzzinrnd]

@@RebeccaGraceDesigns thanks

[@Kinetiphos]

how do we do this for videos though

[@RebeccaGraceDesigns]

Unfortunately, you cannot add videos to Summary Blocks or Gallery Reels. I would suggest using a GIF or video thumbnail and then linking to the page with the video.

[@s88222]

Hi Rebecca can I make my background carousels?

[@RebeccaGraceDesigns]

You can add a full width Gallery Reel Section. However, you wouldn't be able to put other blocks in the section.

[@s88222]

@@RebeccaGraceDesigns thank you so much