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 derbbre, AmariC05, tors and 7 others 10 Link to comment
Scoobie Posted April 28, 2014 Share Posted April 28, 2014 I second this. Not for every scenario but for top of the page headline use on blogs it would be useful. Link to comment
KAUSA Posted July 10, 2014 Share Posted July 10, 2014 I would also like the summary block "carousel" to have an auto play option! Link to comment
Scoobie Posted July 10, 2014 Share Posted July 10, 2014 (edited) I've added this feature request to my consolidated wish list for summary block version 3 http://answers.squarespace.com/questions/41593/can-we-have-these-features-in-summary-block-version-3 Edited July 10, 2014 by scoobie Link to comment
DFT_lakan Posted August 4, 2014 Share Posted August 4, 2014 Any progress on this front?...would love to see my blog posts roll thru on autoplay as well. Using Flatiron at the moment. Link to comment
geeraldine Posted March 30, 2015 Share Posted March 30, 2015 I've been searching on the Answers to no avail, would be great feature! Link to comment
Solution clayyount Posted March 30, 2015 Solution Share Posted March 30, 2015 (edited) 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> Edited April 8, 2015 by ghostcat Link to comment
geeraldine Posted March 31, 2015 Share Posted March 31, 2015 Thanks for your answer! I tried injected the code and it doesn't work.Tried various place, straight into the page, via the settings, nothing seams to be working... Link to comment
clayyount Posted March 31, 2015 Share Posted March 31, 2015 I updated the code in my answer. It should work now. Link to comment
geeraldine Posted April 7, 2015 Share Posted April 7, 2015 Sorry didn't see your response. It seems to be working! http://www.riseconsulting.com.au/career-series-option-2 Is there a way to change the speed of that loop (to make it faster) and make it infinite (coming back to the beginning when it reaches the last post?) Was also wondering if it was possible to add a sort of "fade effect" when in autoplay? But that might be a bit much to ask :) Thank you already for your help! Link to comment
clayyount Posted April 8, 2015 Share Posted April 8, 2015 No problem, I edited my answer above to allow for looping and speed control. Make sure you remove the old code so it works correctly. Change the duration variable to your desired milliseconds between transition. Unfortunately, there's no easy way to do a fade effect. Link to comment
kristelleb Posted May 16, 2015 Share Posted May 16, 2015 Hey! It works perfectly. However, how can I apply it to all the carousels on the page ? Thanks Link to comment
ddwheeler Posted July 2, 2015 Share Posted July 2, 2015 @ghostcat I've been trying to figure out how to do this too. Is the code you gave for @geeraldine specifically for her site or could I inject it into mine too? I only have one summary block carousel and I want to make it rotate, as well, on a loop. I've searched for the CSS, but can't find it other than yours. So would love any help or tips, if possible. Thanks so much! http://www.carriermediaco.com/new-index-2/ Denise btw -- if the site doesn't fully load, just hit the home button. I'm still working on that kink too! :) Link to comment
Rube Posted July 28, 2015 Share Posted July 28, 2015 I'm late to this party, and I'm also a beginner. I've copied and pasted the code into my header on the layout page and nothing happened. Any suggestions? Link to comment
Rube Posted July 28, 2015 Share Posted July 28, 2015 Hey, I've got this working now! But... HELP... I can't figure out how to adjust the speed of the carousel. It's just whipping around every 2 seconds or so and I've tried changing the var duration to 50,000 and nothing changes! I do like the hover feature that stops the ride! Link to comment
dsgnmate Posted August 6, 2015 Share Posted August 6, 2015 ghostcat this is awesome, works great! As a nit-picky bonus is there any way to make it advance one image at a time? I have it set to show three images at once and when it advances it scrolls all the way to the next three instead of just shifting over one. Not a huge deal but would be an awesome addition if possible! Link to comment
Film Illiterate Posted August 14, 2015 Share Posted August 14, 2015 I have no experience coding, but I desperately am trying to get my summary block to auto-scroll. I tried copying and pasting the code above into my Custom CSS, but it keeps saying, "missing opening {". Link to comment
Leogant Posted August 31, 2015 Share Posted August 31, 2015 the las code causes some problems! it disables all the thumbnails on any summary on my site, also it brings the submenu out of line! Link to comment
Leogant Posted August 31, 2015 Share Posted August 31, 2015 the las code causes some problems! it disables all the thumbnails on any summary on my site, also it brings the submenu out of line! Link to comment
Roppo Posted November 16, 2015 Share Posted November 16, 2015 (edited) Did anyone find out how to apply this to all carousels on the page? Thanks, Rob. EDIT: The site I'm trying to get this to work on is https://fertha-s.squarespace.com - I'd like both summary carousels to rotate, not just the top one. Thank you to anyone that can help :) Edited November 16, 2015 by Roppo Link to comment
Roppo Posted November 29, 2015 Share Posted November 29, 2015 Anyone know how to set this to all carousels, site wide? Rob. Link to comment
Roppo Posted November 29, 2015 Share Posted November 29, 2015 Anyone know how to set this to all carousels, site wide? Rob. Link to comment
Sharph20 Posted December 9, 2015 Share Posted December 9, 2015 Anyone having issues with this lately? When it gets to the last item it pulls up a white space and then doesn't loop back. Link to comment
Sharph20 Posted December 9, 2015 Share Posted December 9, 2015 Anyone having issues with this lately? When it gets to the last item it pulls up a white space and then doesn't loop back. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment