XaQQhcQtEhfdzDvpDdQb Posted April 28, 2014 Share Posted April 28, 2014 (edited) 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. Edited August 16, 2016 by rhyann DFT_lakan, Scoobie, KAUSA and 9 others 12 Link to comment
0 Leogant Posted January 14, 2019 Share Posted January 14, 2019 Sorry guys but the code causes trouble with the menu and especially wit5h the mobile menu with Avenue theme. Link to comment
0 tb1200 Posted April 5, 2019 Share Posted April 5, 2019 (edited) For some reason this solution (the original approved solution) has stopped working... has anyone else experienced this? We are using the Brine template. It may have happened after the most current Squarespace update because all was working fine for the past several months. Edited April 5, 2019 by tb1200 Initial Revision Link to comment
0 tb1200 Posted May 2, 2019 Share Posted May 2, 2019 (edited) This script stopped working properly for us in March 2019. Possibly due to a SS update? Would love help figuring out how to adjust. Edited May 2, 2019 by tb1200 Initial Revision Link to comment
0 Datacapwebmaster1 Posted May 2, 2019 Share Posted May 2, 2019 @tb1200 I was thinking the same. I realized that we had successfully implemented this in the past with another page on our site, but that it had stopped working. Wasn't sure when. @WTCOC Any ideas on how to get this working again? Link to comment
0 Datacapwebmaster1 Posted May 2, 2019 Share Posted May 2, 2019 Perhaps @Paul2009 may have some ideas? I know he collaborated on some of the answers on this one as well. Link to comment
0 lmusielak Posted May 3, 2019 Share Posted May 3, 2019 This code is still working for me. However, when using an index, I did find I had to put the code in the header of the index rather than one of the pages in the index. Link to comment
0 Datacapwebmaster1 Posted May 6, 2019 Share Posted May 6, 2019 @lmusielak @tb1200 Which template are you using? We are using the Hayden template. Link to comment
0 dsemenuk Posted July 3, 2019 Share Posted July 3, 2019 Hi there. I am wondering how to change the amount of time each piece of the summary block is displayed. I have tried adjusting the duration variable but it still only displays each entry for about 5 seconds. Thoughts? Link to comment
0 Guest eugeneoei Posted September 24, 2019 Share Posted September 24, 2019 (edited) so.... i tried all suggested solutions and nothing seemed to work for the past 3 hours. the most recent suggested solution by @LJSpace did not work for me either. the value galleries returned is just weird. It returns an empty array and yet there are some t weird-object-looking thing (you should know what i mean if you're a developer). i started investigating the Y.Squarespace object in the console and thank god i found a solution! just paste the following into the code injection. im on squarespace 7 and using the Bryant theme. <script> Y.on('domready', function () { Y.Squarespace.Gallery2.ATTRS.autoplay.value = true }) </script> hope it helps the next person who reads this! Edited September 24, 2019 by eugeneoei Link to comment
0 bheiberg Posted October 20, 2019 Share Posted October 20, 2019 The solution worked for me, but how do I control how much time passes. Right now it about 12 seconds between pages and longer at the end before it restarts. That is too long for my use. Thanks! Link to comment
0 LJSpace Posted November 14, 2019 Share Posted November 14, 2019 @bheiberg change from 10000 to something like 5000 the lower, the faster "timeout":10000, bheiberg 1 Link to comment
0 LJSpace Posted November 14, 2019 Share Posted November 14, 2019 @eugeneoei Strange, maybe try again, I think SquareSpace made some updates. I also started using a different code for this, which I found in an earlier post since I wanted to target a specific gallery. Remember to add this to the page header code injection 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> Link to comment
0 JonJonJon Posted January 7, 2020 Share Posted January 7, 2020 (edited) Great, I got this working on my index (Brine). Thanks everyone for the collaborative effort. For any noobs (like me) the slug replacement would be ("#pagename") - which is the page name you're sourcing your testimonials from, which in my case was called Testimonials Two questions - as this code injection stuff is kind of another coding format to the Design CSS... how can we add easing to this? It's linear animation could be tweaked to be more pleasing. And how do we remove the arrows? (as they are no longer needed in my case) Edited January 7, 2020 by JonJonJon Link to comment
0 JonJonJon Posted January 7, 2020 Share Posted January 7, 2020 An issue: It seems to only work on the first load up of that page. i.e if you navigate to another page, then navigate back, be that via avigation or browser back buton.. then it no longer animates. You have to refresh. Link to comment
0 JonJonJon Posted January 8, 2020 Share Posted January 8, 2020 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; } Link to comment
0 shayshaf Posted January 9, 2020 Share Posted January 9, 2020 Hi guys, Is this still working? I've been trying to make it work for hours and nothing works. Please help! Thank you Link to comment
0 JonJonJon Posted January 9, 2020 Share Posted January 9, 2020 @shaysaf - built mine on Brine a couple of days ago, no problem. Using the code from @LJSpace posted in November 2019 Link to comment
0 marcotperez Posted March 25, 2020 Share Posted March 25, 2020 @LJSpace Your code works great! Any way to get it to loop like the original code? Thanks! Link to comment
0 Bryn Posted May 27, 2020 Share Posted May 27, 2020 On 4/28/2018 at 7:17 AM, Andrei said: In case someone wants to customize a specific gallery, you can find it by section name. You can make a section with a slug, for example: "home-testimonials". Then, find the gallery that resides inside this container. Example: <script> Y.on('domready', function () { try { var container = Y.one("#home-testimonials"); var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container); gallery.setAttrs({ "autoplay":true, "autoplayOptions": { "timeout":20000, "randomize": true } }); } catch (e) { console.error("Could not configure Gallery autoplay.", e); } }); </script> Hi, I'm trying to add an autorotating carousel to the bottom of this index page: https://brynbonino.com/. I've tried several variations of code on this page. This seems to be the most recent answer. Can you help me out? I can't seem to get it to work. I've copied the above to the header of the page in the index that the carousel is in. Am I doing anything wrong? Link to comment
0 dearnaomichan Posted June 8, 2020 Share Posted June 8, 2020 (edited) I'm curious if anyone has tried this in 7.1? It's not working for me and the error I'm getting is "Y is not defined"? Any help is greatly appreciated! Edited June 8, 2020 by dearnaomichan Link to comment
0 tuanphan Posted June 9, 2020 Share Posted June 9, 2020 On 1/9/2020 at 11:04 PM, shayshaf said: Hi guys, Is this still working? I've been trying to make it work for hours and nothing works. Please help! Thank you 8 hours ago, dearnaomichan said: I'm curious if anyone has tried this in 7.1? It's not working for me and the error I'm getting is "Y is not defined"? Any help is greatly appreciated! On 5/27/2020 at 9:42 AM, Bryn said: Hi, I'm trying to add an autorotating carousel to the bottom of this index page: https://brynbonino.com/. I've tried several variations of code on this page. This seems to be the most recent answer. Can you help me out? I can't seem to get it to work. I've copied the above to the header of the page in the index that the carousel is in. Am I doing anything wrong? Add to Home > Settings > Advanced > Code Injection > Footer <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { try { var container = Y.one("#page-section-5eb02bfe70ac761fe73cbc71"); /*change this to the slug of your page*/ var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container); gallery.setAttrs({ "autoplay":true, "autoplayOptions": { "timeout":1000, /*make this higher to decrease speed, lower to increase it*/ "randomize": true } }); } catch (e) { console.error("Could not configure Gallery autoplay.", e); } }); </script> MaryPhilip_ 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
0 matw Posted June 11, 2020 Share Posted June 11, 2020 This FINALLY worked. THANK YOU. A question my loop is functioning but it takes almost 20 seconds to loop. I'm great with CSS and HTML, new to JavaScript. How do I control the loop? Link to comment
0 crrjuilliard Posted July 6, 2020 Share Posted July 6, 2020 On 6/9/2020 at 3:01 AM, tuanphan said: Add to Home > Settings > Advanced > Code Injection > Footer <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { try { var container = Y.one("#page-section-5eb02bfe70ac761fe73cbc71"); /*change this to the slug of your page*/ var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container); gallery.setAttrs({ "autoplay":true, "autoplayOptions": { "timeout":1000, /*make this higher to decrease speed, lower to increase it*/ "randomize": true } }); } catch (e) { console.error("Could not configure Gallery autoplay.", e); } }); </script> is there a way to make the summary carousel loop/repeat items when you get to the end but not autoplay? Link to comment
0 brusselsprouts Posted July 9, 2020 Share Posted July 9, 2020 I'm another person trying to get a Reel slideshow to autoplay in 7.1. I've seen a few answers floating around, but none seem to be working for me. Have folks confirmed that the code above shared by @Andrei and @tuanphan makes autoplay work for slideshow blocks in 7.1? If yes, I'm seeing people post that it works either when injected in the footer of the whole site or under advanced settings for a particular page — which is working? And maybe I'm completely missing something here, but should the slug added to target your gallery be your page ID (e.g. collection ID found in body tag) or section id for the gallery itself? 🙃 nicolettely 1 Link to comment
0 nicolettely Posted July 11, 2020 Share Posted July 11, 2020 I can't get this to work either. Using 7.1. Help please? Thank you! shannonturnercakes.com pw: stc2020 Link to comment
Question
XaQQhcQtEhfdzDvpDdQb
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.
Edited by rhyannLink to comment
Top Posters For This Question
4
8
4
5
Popular Days
Apr 13
4
Mar 31
3
Apr 16
3
Dec 9
3
Top Posters For This Question
Roppo 4 posts
Leogant 8 posts
Datacapwebmaster1 4 posts
tuanphan 5 posts
Popular Days
Apr 13 2016
4 posts
Mar 31 2015
3 posts
Apr 16 2016
3 posts
Dec 9 2015
3 posts
Popular Posts
tuanphan
Add to Page Settings > Advanced > Header <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() {
LJSpace
--I'm not a coder-- but I mixed code from a couple of answers and got this to work in the updated 2019 SS. Note: It does not work in the preview and you have to view your site from an incognito window
LJSpace
@bheiberg change from 10000 to something like 5000 the lower, the faster "timeout":10000,
111 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment