How to add Scrolling Images in Squarespace

Pro Tips Other Tips
1

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

image
image800×99 46.5 KB

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

image
image452×702 43.2 KB

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

In my example, we will have:

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

image
image800×249 83 KB

#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>
1 Like