Jump to content

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

Go to solution Solved by clayyount,

Recommended Posts

  • 2 months later...
  • 4 weeks later...
  • 7 months later...
  • Solution

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
Link to comment

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
  • 1 month later...
  • 1 month later...

@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
  • 4 weeks later...

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
  • 2 weeks later...

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
  • 3 weeks later...
  • 2 months later...
  • 2 weeks later...
  • 2 weeks later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.