How to add Scrolling Images in Squarespace

To add scrolling images in Squarespace, you can use this Logo Showcase widget or use Gallery Section Grid (follow the following steps).

Scrolling Image1 #1. First, you need to add a Gallery Section – Grid

Scrolling Image2 #2. Install Squarespace ID Finder to find ID of Gallery Grid

In my example, we will have

section[data-section-id="665be33616c8f9735222784d"]

Scrolling Image3 #3. Use this code to Page Header Code Injection (or Code Injection > Footer)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(() => {
    let addLeft = '<div id="slider-left" class="slider"><div class="slide-track" id="slides-left">'
    const interval = setInterval(() => {
        let imgs = $('section[data-section-id="665be33616c8f9735222784d"] img');
        if (imgs.length > 0) {
            for (let j=0; j<10; j++) {
                for (let i = 0; i<imgs.length; i++) {
                    addLeft += '<div class="slide"><img src="'+ $(imgs[i]).attr('data-src') +'" alt="" /></div>'
                }
            }
            addLeft += '</div></div>'
            $(addLeft).prependTo('section[data-section-id="665be33616c8f9735222784d"]');
            clearInterval(interval);
        }
    }, 100)
})
</script>
<style>
@keyframes scrollLeft {
    0% { transform: translateX(0); }
  100% {transform: translateX(calc(-250px * 30));}
}
.slide img {
    height: 75px;
}

.slider {
    height: 75px;
    margin: auto;
    overflow:hidden;
    position: relative;
    width: 100%;
}
    
#slider-left	.slide-track {
        animation: scrollLeft 150s linear infinite;
        display: flex;

    }	
    .slide {
        height: 75px;
        padding: 0 40px;
    }
section[data-section-id="665be33616c8f9735222784d"] .section-border, section[data-section-id="665be33616c8f9735222784d"] .content-wrapper {
    display: none;
}


div#slider-left {
    margin-top:70px;
    margin-bottom: 70px;
}
  body, html {
    overflow-x: hidden;
}
</style>