Autoplay Gallery Reel Sections

What does this code do?

This code snippet will set your gallery reel section to automatically scroll through your content. This code is only compatible in Squarespace 7.1 as there are not gallery reel sections in Squarespace 7.0.

Note: The code is set to turn off if your viewer clicks to see the previous gallery item. This is to prevent it skipping forward before they are ready.

Note 2: The code is set to only apply to the live version of the site. You will not see it autoplay in the Squarespace Editor! The code has the next button automatically click every few seconds which confused the Squarespace Editor (especially if there was more than one Gallery Reel on the page). Go to the live version of the website to see it in action!

Code Snippets

All Gallery Reel Sections

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Gallery Reel Autoplay -->
<script>
(function () {
  var galleryReel = document.querySelectorAll(".gallery-reel");
  
  function clickNext(e) {
    var galleryReelNext = e.querySelector('[aria-label="Next Slide"]');
    galleryReelNext.click();
  }
  
 if (window.location.href.indexOf("squarespace") < 0) {
    for (i = 0; i < galleryReel.length; i++) {
      let galleryReelAutoplay = setInterval(clickNext, 3000, galleryReel[i]);
      var galleryReelPrev = galleryReel[i].querySelector('[aria-label="Previous Slide"]');
      galleryReelPrev.addEventListener('click', function(){clearInterval(galleryReelAutoplay);}, false);
    }
  }
})();
</script>

Gallery Reel Sections on One Page

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Gallery Reel Autoplay -->
<script>
(function () {
  var galleryReel = document.querySelectorAll("#COLLECTIONID .gallery-reel");
  
  function clickNext(e) {
    var galleryReelNext = e.querySelector('[aria-label="Next Slide"]');
    galleryReelNext.click();
  }
  
 if (window.location.href.indexOf("squarespace") < 0) {
    for (i = 0; i < galleryReel.length; i++) {
      let galleryReelAutoplay = setInterval(clickNext, 3000, galleryReel[i]);
      var galleryReelPrev = galleryReel[i].querySelector('[aria-label="Previous Slide"]');
      galleryReelPrev.addEventListener('click', function(){clearInterval(galleryReelAutoplay);}, false);
    }
  }
})();
</script>

Then change #COLLECTIONID to the collection id of the page.

A Specific Gallery Reel Section

Copy and paste this code into the Settings > Advanced > Code Injection > Footer

<!-- Gallery Reel Autoplay -->
<script>
(function () {
  var galleryReel = document.querySelectorAll("#COLLECTIONID #page .page-section:nth-of-type(1) .gallery-reel");
  
  function clickNext(e) {
    var galleryReelNext = e.querySelector('[aria-label="Next Slide"]');
    galleryReelNext.click();
  }
  
 if (window.location.href.indexOf("squarespace") < 0) {
    for (i = 0; i < galleryReel.length; i++) {
      let galleryReelAutoplay = setInterval(clickNext, 3000, galleryReel[i]);
      var galleryReelPrev = galleryReel[i].querySelector('[aria-label="Previous Slide"]');
      galleryReelPrev.addEventListener('click', function(){clearInterval(galleryReelAutoplay);}, false);
    }
  }
})();
</script>

Then change #COLLECTIONID to the collection id of the page and the “1” to the section that gallery is in. For example, if it is in the third section, change the 1 to a 3.

Turn It Off On Mobile

If you don’t want the gallery section to autoplay on mobile, copy and paste this code into the Settings > Advanced > Code Injection > Footer.

Note: To see it in action, you must open the website on a mobile device.

WARNING: If you have used this mobile check in your code already, using it twice will cause the code to clash. You will need to combine it together. Click here to see our list of known clashes and how to fix them!

<script>
  function mobileCheck(x) {
    if (x.matches) { // If media query matches 
    } else {
      PASTE CODE HERE
    }
  }

var x = window.matchMedia("(max-width: 640px)")
mobileCheck(x) // Call listener function at run time
x.addListener(mobileCheck) // Attach listener function on state changes
  </script>

Then put the code you want from above (except the script tags) and paste it where it says PASTE CODE HERE. For example, if I wanted all gallery reels to autoscroll, I would use the following code.

<script>
  function mobileCheck(x) {
  if (x.matches) {
    // If media query matches
  } else {
    //CODE FROM ABOVE STARTS HERE
    (function () {
      var galleryReel = document.querySelectorAll(".gallery-reel");

      function clickNext(e) {
        var galleryReelNext = e.querySelector('[aria-label="Next Slide"]');
        galleryReelNext.click();
      }

      if (window.location.href.indexOf("squarespace") < 0) {
        for (i = 0; i < galleryReel.length; i++) {
          let galleryReelAutoplay = setInterval(clickNext, 3000, galleryReel[i]);
          var galleryReelPrev = galleryReel[i].querySelector('[aria-label="Previous Slide"]');
          galleryReelPrev.addEventListener("click",function () {clearInterval(galleryReelAutoplay);},false);
        }
      }
    })();
    //CODE FROM ABOVE ENDS HERE
  }
}

var x = window.matchMedia("(max-width: 640px)");
mobileCheck(x); // Call listener function at run time
x.addListener(mobileCheck); // Attach listener function on state changes

</script>

How To Use It

1. Copy and paste the code as indicated above.

2. This is set to scroll every 3 seconds (or 3000 milliseconds). You can change the speed by changing the 3000 to the number of milliseconds you would like.

3. To learn how to find a collection id check out our Start Here guide.

4. Change the 1 to match the section you are trying to change.