Jump to content

Anyone know how to make rotating carousel of images transition with a slow fade in Squarespace 7.1

Recommended Posts

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!

Link to comment

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!


Link to comment
  • 6 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.