Summary Block: How can I set the Carousel to "autoplay"?

XaQQhcQtEhfdzDvpDdQb · April 28, 2014

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

Scoobie · April 28, 2014

I second this. Not for every scenario but for top of the page headline use on blogs it would be useful.

KAUSA · July 10, 2014

I would also like the summary block "carousel" to have an auto play option!

Scoobie · July 10, 2014

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

DFT_lakan · 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.

geeraldine · March 30, 2015

I've been searching on the Answers to no avail, would be great feature!

clayyount · March 30, 2015

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

geeraldine · 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...

clayyount · March 31, 2015

Link to your site?

clayyount · March 31, 2015

I updated the code in my answer. It should work now.

geeraldine · 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!

clayyount · 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.

kristelleb · May 16, 2015

Hey! It works perfectly. However, how can I apply it to all the carousels on the page ? Thanks

ddwheeler · 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! :)

Rube · 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?

Rube · 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!

dsgnmate · 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!

Film Illiterate · 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 {".

Leogant · 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!

Leogant · 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!

Roppo · November 16, 2015

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

Roppo · November 29, 2015

Anyone know how to set this to all carousels, site wide?

Rob.

Roppo · November 29, 2015

Anyone know how to set this to all carousels, site wide?

Rob.

Sharph20 · 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.

Sharph20 · 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.

Summary Block: How can I set the Carousel to "autoplay"?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

LJSpace

LJSpace

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources