Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 6
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. 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.

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

@benf @socialxdata @barney

This code is working.


<script>
   Y.on('domready', function () {
       var galleries = Y.Squarespace.GalleryManager.getGalleries();
       var duration = 4000;
       var gallery=galleries[0];
       var carousel=gallery["gallery-design"];
       var totalGroups=carousel.get('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>


Share this post


Link to post
  • 3

--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 (aka signed out of the backend to see it). PLUS you need to add this to the page header code injection section. If the page is in an Index, you need to add it to the Index's header code injection.


<script>
    Y.on('domready', function () {
        var galleries = Y.Squarespace.GalleryManager.getGalleries();
        for( i = 0; i < galleries.length; i++){
            galleries[i].setAttrs({
              "autoplay": true,
              "autoplayOptions": {
          "timeout":10000,
          "randomize": true
              }
            })
        }
    });
</script>





Edited by LJSpace
Initial Revision

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

In response to Paul2009, here's the new code.


<script>
   Y.on('domready', function () {
       var galleries = Y.Squarespace.GalleryManager.getGalleries();
       var duration = 4000;
       var gallery=galleries[0];
       var carousel=gallery["gallery-design"];
       var totalGroups=5;
       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>

Share this post


Link to post
  • 2

In case someone wants to customize a specific gallery, you can find it by section name. You can make a section with a slug, for example: "home-testimonials". Then, find the gallery that resides inside this container.

Example:


<script>  
 Y.on('domready', function () {
   try {
     var container = Y.one("#home-testimonials");
     var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container);
     gallery.setAttrs({
       "autoplay":true,
       "autoplayOptions": {
         "timeout":20000,
         "randomize": true
       }
     });
   } catch (e) {
     console.error("Could not configure Gallery autoplay.", e);
   }
 });
</script>




Edited by Andrei
Initial Revision

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
  • 1
Guest

To get it to suit the number of items in your gallery, change this line:

var totalGroups=5;

to

var totalGroups=carousel.get('totalGroups');

Edited by Guest
Initial Revision

Share this post


Link to post
  • 1

@benf just tried this out, and it looks like you have to do it in the header injection on the page itself. The steps are essentially the same, but listed below:

Settings (gear icon) > Advanced > Page Header Code Injection

Share this post


Link to post
  • 1

Hi @wtcoc @benf @ghostcat,I've tried this code (this one here => Answer by WTCOC · Nov 13, 2017 at 04:24 PM) and the very first one on this post by @ghostcat and it seems to work on my site while I'm logged in inside Squarespace, but when I test it from the out, it doesn't scroll.I'm using Bedford. Also, I don't even need it to loop - would be great, but not fussed about the loop. It can be a simple autoplay for my summary carousel (of testimonials saved as 'blogs'). Could you help? Here's the page in question: innovatorsbox.comThanks in advance.

Share this post


Link to post
  • 1
On 8/11/2020 at 2:32 AM, xallarap said:

Hi @tuanphan, I am also trying to make a summary carousel autoplay in 7.1, would you be able to take a look at this page? Thanks!

https://triceratops-maroon-kxrm.squarespace.com/home

pw: nailed

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() {
    try {
     var container = Y.one("#page-section-5f319a27fa5d637772c3c12a"); 
     var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container);
     gallery.setAttrs({
       "autoplay":true,
       "autoplayOptions": {
         "timeout":2000, /*make this higher to decrease speed, lower to increase it*/
         "randomize": true
       }
     });
   } catch (e) {
     console.error("Could not configure Gallery autoplay.", e);
   }
});
</script>

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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

Create an account or sign in to comment

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


×
×
  • Create New...