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

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


jasonbarone
Go to solution Solved by clayyount,

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. I'm building products and services for the Squarespace platform and documenting everything on YouTube. I've been working with the platform since 2008 and my work with Squarespace led to me being hired by Uber where I spent over 5 years working on the web, design and content platform teams. 

Need help with Squarespace? Send me an email! Otherwise connect with me on TwitterInstagram, or Linkedin.

Link to post
  • Answers 106
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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() {

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

@bheiberg change from 10000 to something like 5000 the lower, the faster "timeout":10000,  

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

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.

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

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?

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!

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!

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