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!
