Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 4
jasonbarone

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

Question

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 rhyann

  • 🚀Founder at Squarefront, the global community of Squarespace builders.
  • 🎥Documenting the process of building Squarefront on YouTube.
  • 🚗Senior Design Engineer, Design Platform at Uber.
  • 🍕Connect with me on Instagram, Twitter and Linkedin.
  • Need help with Squarespace? I've used the platform for well over 10 years and have helped thousands of businesses, both small and large. Send me an email!

Share this post


Link to post

Recommended Posts

  • 8

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 by ghostcat

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 2

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.

Share this post


Link to post
  • 1

@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! :)

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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 {".

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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 by Roppo

Share this post


Link to post
  • 0

Mine no longer autoplays on desktop versions, only on mobile... Still can't figure out how to make the same apply to all carousels :(

EDIT: Oh yeah- I see what you mean about the white box at the end, it's doing the same on mine... sigh

Edited by Roppo

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...