Autoplay Carousel Summary Blocks

What does this code do?

This code snippet will set your carousel summary blocks to automatically scroll through your content. This code is compatible in Squarespace 7.1 and most 7.0 templates.

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

Code Snippets

All Carousel Summary Blocks

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

<!-- Summary Block Autoplay -->
<script>
  var summaryCarousel = document.querySelectorAll(".sqs-block-summary-v2");
  for (var i = 0; i < summaryCarousel.length; i++) {
    var carouselNextArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-next");
    var carouselPrevArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-prev");
    carouselPrevArrow.addEventListener("click", carouselStopAutoplay, false);
  }

  function carouselClickNext() {
    carouselNextArrow.click();
  }

  function carouselStopAutoplay() {
    clearInterval(carouselAutoplay);
  }

  let carouselAutoplay = setInterval(carouselClickNext, 3000);
</script>

Carousel Summary Blocks on One Page

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

<!-- Summary Block Autoplay -->
<script>
  var summaryCarousel = document.querySelectorAll("#COLLECTIONID .sqs-block-summary-v2");
  for (var i = 0; i < summaryCarousel.length; i++) {
    var carouselNextArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-next");
    var carouselPrevArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-prev");
    carouselPrevArrow.addEventListener('click', carouselStopAutoplay, false);
  }
  
  function carouselClickNext() {
    carouselNextArrow.click();
  }

  function carouselStopAutoplay() {
    clearInterval(carouselAutoplay);
  }
  
  let carouselAutoplay = setInterval(carouselClickNext, 3000);
</script>

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

A Specific Carousel Summary Block

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

<!-- Summary Block Autoplay -->
<script>
  var summaryCarousel = document.querySelectorAll("#BLOCKID");
  for (var i = 0; i < summaryCarousel.length; i++) {
    var carouselNextArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-next");
    var carouselPrevArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-prev");
    carouselPrevArrow.addEventListener('click', carouselStopAutoplay, false);
  }

  function carouselClickNext() {
    carouselNextArrow.click();
  }

  function carouselStopAutoplay() {
    clearInterval(carouselAutoplay);
  }
  
  let carouselAutoplay = setInterval(carouselClickNext, 3000);
</script>

Then change #BLOCKID to the block id of the carousel summary block.

Turn It Off On Mobile

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

Note: To see it in action switch to mobile view, right click and select Reload Frame. It must load the screen in mobile view. It checks the size of the screen when the page loads. So, if you load in desktop view and then switch to mobile, it will run the code as if you are viewing from desktop.

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 carousel summary blocks 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
      var summaryCarousel = document.querySelectorAll(".sqs-block-summary-v2");
      for (var i = 0; i < summaryCarousel.length; i++) {
        var carouselNextArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-next");
        var carouselPrevArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-prev");
        carouselPrevArrow.addEventListener('click', carouselStopAutoplay, false);
      }

      function carouselClickNext() {
        carouselNextArrow.click();
      }

      function carouselStopAutoplay() {
        clearInterval(carouselAutoplay);
      }

      let carouselAutoplay = setInterval(carouselClickNext, 3000);
      //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 or block id check out our Start Here guide.