Anyone know how to make rotating carousel of images transition with a slow fade in Squarespace 7.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:

<script>
  (function(){
    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)})});
  }());
</script>

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!

It alerts the wrong password. Can you check it again? By the way, do you have any sample/image of your desired result?

Hi, sorry about the password issue, I have changed it to DrUmBeat250%

Ideally, some code to make the home page carousel images transition with a fade or dissolve similar to the attached vid would be great 🙂

Did you have any luck with this?

@Maddy123 @Beyondspace