Directions:

Add a List Section to your page.
Set your Layout Section design to “Banner Slideshow” or “Carousel”
Turn on the Navigation Arrows
(Edit Content » Design » Style » Navigation Controls » Arrow.)
Paste the following code into the Page Header Code Injection

<!-- Auto Scroll Layout Sections from Will-Myers.com -->
<script>
  (function(){
    let playInBackend = true,
        timing = 3,
        section = '',
        direction = 1; //1 = forwards, 0 = backwards

    /*Do not Adjust below this line*/
    function AutoScrollLayout(e){if(null==(e=""==e?document.querySelector(".user-items-list-section"):document.querySelector(e)))return;let n,t,o,i,c,r=!1,u=e.querySelectorAll('button[class*="__arrow-button"]');function s(){n=setInterval(d,t)}function d(){o=document.querySelector("body.sqs-edit-mode-active"),i=document.querySelector(".sqs-modal-lightbox-open, .wm-mega-menu--open, .header--menu-open"),r||o||i||!c||u[direction].click()}t=1e3*timing;if(document.addEventListener("visibilitychange",(function(){r=!!document.hidden})),["mousedown","touchstart"].forEach((n=>{e.addEventListener(n,(function(){r=!0}))})),["mouseup","touchend"].forEach((t=>{e.addEventListener(t,(function(){r=!1,clearInterval(n),s()}))})),window.IntersectionObserver){new IntersectionObserver(((e,n)=>{e.forEach((e=>{c=!!e.isIntersecting}))}),{rootMargin:"-75px 0px -75px 0px"}).observe(e)}u[direction]&&s()}window.addEventListener("load",(function(){let e=new Array;e.push(section),section.includes(",")&&(e=section.split(",")),e.forEach((e=>{(window.top==window.self||window.top!==window.self&&playInBackend)&&new AutoScrollLayout(e)}))}));
  }());
</script>

Settings

This code has 3 settings. Make these adjustments using the variables at the top of the code.

playInBackend - set this to true or false. If true, the slider will auto-transition while you’re in the Squarespace editor. I recommend keeping this on "false" to avoid accidently activating edit mode.
timing - set this to any number value. This sets the time interval between slides in seconds.
sections - set this to the specific Layout section or sections you want the auto-slider to work on using the data-section-id.
(ex. sections = '[data-section-id="1"], [data-section-id="1"]' )

Auto Scrolling List Sections

Comments