Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by Maddy123

  1. Hi all,

    I'm currently completing a website for a client using Squarespace 7.1 and the Stanton template.

    The splash page is a carousel of images set to 1 image per column. I have used the following Page Header Code Injection to make the images display as a dynamic slideshow transitioning every 3 seconds:

        let playInBackend = true,
            timing = 3,
            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)})});

    However now I am wondering if anyone knows a way to edit the transition style/ animation using CSS? Currently the images scroll between each other very quickly and it is quite jarring. Ideally I would like one image to fade out and into the next one for a more gradual transition. 

    If anyone has knowledge of how to do this it would be so appreciated!


    My site url: jeremy-morgan.co.uk (custom domain) jeremy-morgan.squarespace.com (squarespace built-in domain)

    Password: ShowMe250%

    Thanks in advance!

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.