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.

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; }

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?

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.