Create An Auto Scrolling Logo Slider

How to create a scrolling logo slider in Squarespace 7.1.

SEC Logos.001.png
SEC Logos.002.png
SEC Logos.003.png
SEC Logos.004.png
SEC Logos.005.png
SEC Logos.006.png
SEC Logos.007.png
SEC Logos.008.png
SEC Logos.009.png
SEC Logos.010.png
SEC Logos.011.png
SEC Logos.012.png
SEC Logos.014.png

I was asked if it was possible to have a rotating slider in Squarespace 7.1, like on this website: https://unita.com.au/. It is possible to hack your way into making it work. This is the solution that I came up with, and it works pretty well.

I do think that as Squarespace 7.1 gets more built out, this is a feature they will add to their gallery block, auto transitions seem kinda basic, but in the meantime this tutorial will get one together for you.

If you don’t want to watch the whole video, be sure to note the slight issue that arises when editing your page - jump to 12:12.

If you want to get notified when I release more tutorials like this, sign up for my newsletter below.

Check out this tutorial to add a full page sliding background images to your website.

Code

Javascript

Paste this code into the PAGE Settings » Advanced » Code Injection area of the page.
To add this effect to multiple gallery sections, copy the code between the <script> tags, and paste it at the bottom of the <script> tags, but still before the closing </script> tag. Be sure to change the “instance” variable. 

<!--Be sure jQuery is loaded onto your website-->
<!--Add this to the Page Settings » Advanced » Code Injection Settings-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> 
<script>
  $(function(){
    /*1*/
    let instance = 1; 
    /* instance of a gallery section on the page.
       1 = the first gallery section on a page,
       2 = the second gallery section on a page*/
    
    let direction = 2;
    /* 1 = backwards,
       2 = forwards*/
    
    window.setInterval(function(){
      if ( $("body:not(.sqs-edit-mode-active, .sqs-edit-mode) .gallery-reel").length > 0 ) {
        $('html:not(.sqs-modal-lightbox-open) .gallery-section')[(instance - 1)].querySelector('.gallery-reel-control:nth-of-type(' + direction + ') .gallery-reel-control-btn').click()
      }
    }, 2000);
  });
</script>

Custom CSS

Paste this code into your Design » Custom CSS area. 

[data-section-id='YOUR DATA SECTION ID']{
  .gallery-reel{
    height:20vh !important;
    padding-left: 0px;
    padding-right: 0px;

    figure{
    filter:grayscale(100%);
    }

    .gallery-reel-controls{
      display:none;
    }
  }
}

Updated on July 1, 2020 to bring a better Editing Experience + Account for Squarespace Lightbox popups.
Updated on Oct 1, 2021 to bring additional options for direction & which gallery slider on the page.

Make the Logos smaller on mobile:

<style>
@media(max-width: 767px){
  #page .gallery-reel {
    height: 10vh !important;
  }
}
</style>
SEC Logos.001.png
SEC Logos.002.png
SEC Logos.003.png
SEC Logos.004.png
SEC Logos.005.png
SEC Logos.006.png
SEC Logos.007.png
SEC Logos.008.png
SEC Logos.009.png
SEC Logos.010.png
SEC Logos.011.png
SEC Logos.012.png
SEC Logos.013.png
SEC Logos.014.png

More Plugins & Tutorials

Get updated monthly-ish on all the new Squarespace Tutorials and explainer videos that I’ve created or found useful.