Banner Image Slider
1. How it Works
Add the Slider Section: Insert a new section on your Squarespace page and select the ‘Banner Slider’ design from the 'People' category.
Customize Your Content: Add your chosen images, along with engaging text and buttons, directly through the content editor.
Adjust the Design: Use the design settings to modify the size and spacing of your slider to achieve the desired look.
Inject the Code: Copy the custom code provided and paste it into your page’s
<head>tag for added functionality.Save and Publish: Once you’re satisfied with the design, save your changes and your slider will be live on your site.
2. Add this code to Page Header (Advance)
<script>
(function(){
let playInBackend = true,
timing = 5,
section = '',
direction = 1; //1 = forwards, 0 = backwards
/*Do not Adjust below this line*/
function AutoScrollLayout(e){e=""==e?document.querySelector(".user-items-list-section"):document.querySelector(e);let t,n,o,i,c,r=!1,s=e.querySelectorAll('button[class*="__arrow-button"]');function d(){t=setInterval(u,n)}function u(){o=document.querySelector("body.sqs-edit-mode-active"),i=document.querySelector(".sqs-modal-lightbox-open"),r||o||i||!c||s[direction].click()}n=1e3*timing;if(document.addEventListener("visibilitychange",function(){r=!!document.hidden}),["mousedown","touchstart"].forEach(t=>{e.addEventListener(t,function(){r=!0})}),["mouseup","touchend"].forEach(n=>{e.addEventListener(n,function(){r=!1,clearInterval(t),d()})}),window.IntersectionObserver){new IntersectionObserver((e,t)=>{e.forEach(e=>{c=!!e.isIntersecting})},{rootMargin:"-75px 0px -75px 0px"}).observe(e)}s[direction]&&d()}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>
To apply this code to your Squarespace site, simply follow the steps provided. If you encounter any issues or need further assistance, feel free to reach out to us—we’re here to help!
