[Share] Auto Scroll Gallery Grid

This code will turn Gallery Section - Grid to Autoscroll Carousel. If you can't make it work, you can comment below or message me.

Demo: https://tuanphan.squarespace.com/gallery-section-grid-autoscroll?noredirect

Pass: abc

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

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

https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

In my example, we will have

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

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

#4. Note

In the code, I added same ID to 4 positions. You need to replace these IDs with your Gallery Section ID.

hi @tuanphan it's all understandable but I have 8 logos and squarespace doesn't let me create more than 6 columns. Do you have any solution for that? 

Also, I tried with 6 pictures with this code and following your instruction and it doesn't work. 

the website is: 
www.toleasing.pl 

16 hours ago, azaslona123 said:

hi @tuanphan it's all understandable but I have 8 logos and squarespace doesn't let me create more than 6 columns. Do you have any solution for that? 

 

Also, I tried with 6 pictures with this code and following your instruction and it doesn't work. 

the website is: 
www.toleasing.pl 

You mean this section?

#1. Number of Columns is not affected. Whether you choose 3, 6 or 8, the code will convert all to one line scroll.

#2. I see you used incorrect ID