Search the Community

I love the new Summary Block carousel. I'm curious if it's possible to "autoplay" the carousel much like galleries can do. I know this is possible using Developer Platform galleries, but would love to be able to use with Block Carousels.

Hi, I was wondering if there was any way to have a Vimeo video autoplay in Summary: Wall? I have know I need to embed a video into a regular page with autoplay feature turned on, but seems like no way to have them autoplay in Summary: Wall? I did add the video in as an embedded file trough gallery, but seems my only option is if there was some code to enable it. Thanks for your help

Site URL: https://finch-deer-tt6j.squarespace.com Hi! I am trying to set a carousel summary to autoplay on the homepage. For context (if it helps) I put quotes in separate blog posts and then created a summary carousel to display them. Currently, it does not move through the different quotes (i.e. "blogs") automatically. There is just a small navigation scroller above it to manually scroll through them (see image below). Can anyone help? The website is using version 7.1. It is in the trial phase still so I cannot make it public yet. I can provide the password if needed to access it.

Hi there! Is there anyway to make a summary carousel autoplay in the adirondack template? Thanks in advance! -Kristen

If you share link to your site, I can give the code to make gallery reel autoplay. Can you share link to page where you use summary block?

Hey, everyone! I have a Squarespace 7.1 site and I'm having an issue. I have a gallery block which I have set to "slideshow:reel" gallery type. I want the images to autoplay (which was a feature available in previous versions). I've tried the code injection from this thread, but I haven't had any luck getting it to work: https://forum.squarespace.com/topic/26409-summary-block-how-can-i-set-the-carousel-to-autoplay/ How can I get this gallery to autoplay/auto-scroll? Thank you!

is there a way to make the summary carousel loop/repeat items when you get to the end but not autoplay?

I read that this code works, its old so I am keeping my fingers crossed that it is still good. You place it in the advance code injection header of your summary page: script> Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); var duration = 4000; var gallery=galleries[0]; var carousel=gallery["gallery-design"]; var totalGroups=carousel.get('totalGroups'); var currentGroup=0 var container=gallery.get("container"); var nextBtn=Y.one(gallery.get("elements.next")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); advanceCarousel() }) var prevBtn=Y.one(gallery.get("elements.previous")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); backupCarousel() }) Y.one(container._node).get('parentNode').on("mouseover",function(){ clearInterval(myInterval) }) Y.one(container._node).get('parentNode').on("mouseout",function(){ clearInterval(myInterval) setMyInterval() }) var myInterval; function setMyInterval(){ myInterval = setInterval(function(){ advanceCarousel() },duration) } setMyInterval(); function advanceCarousel(){ if(currentGroup==(totalGroups-1)){ currentGroup=0; }else{ currentGroup++; } carousel.goToGroup(currentGroup); } function backupCarousel(){ if(currentGroup==0){ currentGroup=totalGroups-1 }else{ currentGroup--; } carousel.goToGroup(currentGroup); } }); </script> This one was created later, and I think I would try it first: Remember to add this to the page header code injection for the summury page OR the header code injection for the Index if it's in an Index. Also it may not work in preview. Try testing it from an incognito window in your browser. <script> Y.on('domready', function () { try { var container = Y.one("#reviews"); /*change this to the slug of your page*/ var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container); gallery.setAttrs({ "autoplay":true, "autoplayOptions": { "timeout":9000, /*make this higher to decrease speed, lower to increase it*/ "randomize": true } }); } catch (e) { console.error("Could not configure Gallery autoplay.", e); } }); </script>

Thanks so much! So, it works when I am viewing the summary itself, but when I add the summary to a page it doesn't autoplay. Any suggestions?

Hello - I used the following code found on another thread to auto-scroll my testimonials (I used a carousel summary block). It works great. However, I'm hoping someone can help me figure out how to slow it down. It's currently scrolling every 3 seconds. FYI - I'm new to using code. 🙂 Thanks a ton! <script> Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); for( i = 0; i<galleries.length; i++){ galleries[i].setAttrs({"autoplay":true}) } }); </script>

Hi there, I'm trying to make my blog landing page have a headline at the top of the page that is populated by featured blog posts. So I thought about putting a summary block at the top but the images don't bleed through as background images. Do you know a way to have the main image of a blog post, to be used as a full-bleed background image in a auto-playing carousel? I hope that comes across somewhat clearly? Haha I've included an image below to give you hint of what I mean. And so that would be a featured post and it would auto play to the next summary post.

I'm using the code found here: https://answers.squarespace.com/questions/46060/can-we-set-a-summary-block-carousel-to-autoplay.html Is there a way to apply this to all the carousels on my page/site?

Moving the arrows I decided to leave the arrows in, because as mentioned the autoplay only works on the first interaction with the carousel. This code I got from: https://thirtyeightvisuals.com/blog/custom-arrows-testimonial-carousel-squarespace Which also outlines more customisations to the carousel should you wish /////TESTIMONIALS ARROWS/// .summary-carousel-pager { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100% !important; z-index: 1; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous { float: left; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous, .sqs-gallery-design-carousel .sqs-gallery-controls .next { margin:0; }

Hi @wtcoc @benf @ghostcat,I've tried this code (this one here => Answer by WTCOC · Nov 13, 2017 at 04:24 PM) and the very first one on this post by @ghostcat and it seems to work on my site while I'm logged in inside Squarespace, but when I test it from the out, it doesn't scroll.I'm using Bedford. Also, I don't even need it to loop - would be great, but not fussed about the loop. It can be a simple autoplay for my summary carousel (of testimonials saved as 'blogs'). Could you help? Here's the page in question: innovatorsbox.comThanks in advance.

You can use this header inject code to get the summary block carousel on your page to autoplay: <script> Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); for( i = 0; i<galleries.length; i++){ galleries[i].setAttrs({"autoplay":true}) } }); </script> Getting it to loop is trickier though because the "loop" gallery attribute doesn't work correctly. Since Squarespace's carousel loop option doesn't work the way it's supposed to, I had to basically override Squarespace's gallery controls and set my own interval. Because there is only one carousel on your page, I changed it to only target the first summary carousel. <script> Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); var duration = 2000; var gallery=galleries[0]; var carousel=gallery["gallery-design"]; var totalGroups=carousel.totalGroups; var currentGroup=0 var container=gallery.get("container"); var nextBtn=Y.one(gallery.get("elements.next")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); advanceCarousel() }) var prevBtn=Y.one(gallery.get("elements.previous")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); backupCarousel() }) Y.one(container._node).get('parentNode').on("mouseover",function(){ clearInterval(myInterval) }) Y.one(container._node).get('parentNode').on("mouseout",function(){ clearInterval(myInterval) setMyInterval() }) var myInterval; function setMyInterval(){ myInterval = setInterval(function(){ advanceCarousel() },duration) } setMyInterval(); function advanceCarousel(){ if(currentGroup==(totalGroups-1)){ currentGroup=0; }else{ currentGroup++; } carousel.goToGroup(currentGroup); } function backupCarousel(){ if(currentGroup==0){ currentGroup=totalGroups-1 }else{ currentGroup--; } carousel.goToGroup(currentGroup); } }); </script>

@gpelaia See https://answers.squarespace.com/questions/46060/can-we-set-a-summary-block-carousel-to-autoplay.html. This works.

@gpelaia See https://answers.squarespace.com/questions/46060/can-we-set-a-summary-block-carousel-to-autoplay.html. This works.