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

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

Link to post
  • 0

Hi

Was wondering if you could have a look at my website?www.wekillpirates.com

I've tried to inject this code above to get my carousel to loop on the front page but it doesn't seem to work.

any help would be great

Dane

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
Link to post
  • 0

IMPORTANT!!!The code works with the carousel but it effects the rest of the page to much.There is a bug in the code, but I can't find it. In Avenue when inserting the code the thumbnails of the index grid disappear and in Marque the image gallery page disappears.

Link to post
  • 0

IMPORTANT!!!The code works with the carousel but it effects the rest of the page to much.There is a bug in the code, but I can't find it. In Avenue when inserting the code the thumbnails of the index grid disappear and in Marque the image gallery page disappears.

Link to post
  • 0

i think you would want to create another gallery variable. In the example above, he/she grabs the gallery using:var gallery = galleries[0];

So if you added another gallery (and it was the second gallery on the page) you might do something like:var gallery2 = galleries[1];

then do everything you did to 'gallery' to 'gallery2'

Link to post
  • 0

Does anyone know what the beginning part of the code does?? Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries();

What does 'Y.on' do? What does 'domready' do? and what does 'Y.Squarespace' do?

For some reason the 'domready' is screwing up my navigation bar when I am in mobile view. When I remove the 'domready' the navigation works fine. What exactly does 'domready' do and why would it cause only my mobile navigation to stop working?
Also the the carousel will not work without 'domready'

Edited by ASAP_aul
Initial Revision
Link to post
  • 0

Max . if you think Roy `s blog is amazing, on sunday I bought a new Saab 99 Turbo after having earned $7853 this - 4 weeks past and-a little over, $10k this past-month . it's realy the nicest-job I've had . I began this four months/ago and pretty much straight away began to earn at least $72, per-hour . learn the facts here now

=========== http://goo.gl/sNgdBv

Link to post
  • 0

Hey. So code works fine, but I can't get my 9 pictures to show up. It always cuts off the last one and shows only 8. I anyway replaced the code with the "var totalGroups=carousel.get('totalGroups');" but does´t help. Thanks for feedback!

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