Jump to content

Summary Carousel Autoplay

Recommended Posts

  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

I read that this code works, its old so I am keeping my fingers crossed that it is still good. You place it in the advance code injection header of your summary page:

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>


 

This one was created later, and I think I would try it first:

 Remember to add this to the page header code injection for the summury page OR the header code injection for the Index if it's in an Index. Also it may not work in preview. Try testing it from an incognito window in your browser.

 

<script>  
 Y.on('domready', function () {
   try {
     var container = Y.one("#reviews"); /*change this to the slug of your page*/
     var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container);
     gallery.setAttrs({
       "autoplay":true,
       "autoplayOptions": {
         "timeout":9000, /*make this higher to decrease speed, lower to increase it*/
         "randomize": true
       }
     });
   } catch (e) {
     console.error("Could not configure Gallery autoplay.", e);
   }
 });
</script>
 

 

 
Edited by derricksrandomviews
Link to comment

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.