[Share] Auto Scroll Gallery Grid

tuanphan · June 2

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.

azaslona123 · June 27

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

Edited June 27 by azaslona123
adding new info

tuanphan · June 28

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

tuanphan · July 16

Update

If you want to apply this for a Gallery Block, you can follow these.

(1) First, add a Gallery Block

(2) Choose Grid Layout

(3) Upload some logos in Content Tab

(4) Use Squarespace ID Finder to find ID Of Section. In my case, it is:

section[data-section-id="663ae86e1a3ed0777cfbb600"]

(5) Use this code to Page Header Injection (Page where you use Gallery Block)

<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 = $('.sqs-block.gallery-block.sqs-block-gallery img');
        if (imgs.length > 0) {
            for (let j=0; j<9; 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="663ae86e1a3ed0777cfbb600"]');
            clearInterval(interval);
        }
    }, 100)
})
</script>

Replace with your section ID

(6) Use this code to Custom CSS box

@keyframes scrollLeft {
	0% { transform: translateX(0); }
  100% {transform: translateX(calc(-250px * 45));}
}
.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;
	}
div#slider-right {
    display: none !important;
}
div#slider-left {
    margin-top:70px;
    margin-bottom: 70px;
}
section[data-section-id="663ae86e1a3ed0777cfbb600"] {
.section-border {
    display: none;
}
& {
    flex-direction: column-reverse;
}
  .gallery-block {
    display: none !important;
}
.content-wrapper {
    padding: 0px !important;
}}

Replace with your section id

tuanphan · July 16

Update

If you use Gallery Block Grid in 7.0

Replace (5) and (6) code with this code

<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 = $('div#block-yui_3_17_2_1_1721102317221_4857 img');
        if (imgs.length > 0) {
            for (let j=0; j<9; 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).insertBefore('div#block-yui_3_17_2_1_1721102317221_4857');
            clearInterval(interval);
        }
    }, 100)
})
</script>
<style>
@keyframes scrollLeft {
	0% { transform: translateX(0); }
  100% {transform: translateX(calc(-250px * 45));}
}
.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;
	}
div#slider-right {
    display: none !important;
}
div#slider-left {
    margin-top:70px;
    margin-bottom: 70px;
}
div#block-yui_3_17_2_1_1721102317221_4857 {
    display: none;
}
</style>

replace Gallery Block ID in the code with your Gallery Block ID

div#block-yui_3_17_2_1_1721102317221_4857

BrownKatUK · July 22

On 6/2/2024 at 4:23 AM, tuanphan said:

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 - I am trying to do the same thing - so that once the four gallery images have shown it seamlessly moves to the first image again and does not jerk left and start again. I've tried this code and indentified the section ID but am still a bit confused - I might be adding it to the wrong places. I'd love your help please. The site is https://ellipse-grouper-b5ek.squarespace.com/ PW: WLK thank you!

tuanphan · July 25

On 7/22/2024 at 6:08 PM, BrownKatUK said:

Hi - I am trying to do the same thing - so that once the four gallery images have shown it seamlessly moves to the first image again and does not jerk left and start again. I've tried this code and indentified the section ID but am still a bit confused - I might be adding it to the wrong places. I'd love your help please. The site is https://ellipse-grouper-b5ek.squarespace.com/ PW: WLK thank you!

Which page/section are you referring to?

erikb954 · September 22

On 6/1/2024 at 11:23 PM, tuanphan said:

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.

This worked well, thank you - I do have one issue with my background color though. I would like the background of the carousel to be black and match the rest of my site. Can you please help? My images are transparent backgrounds and I've tried adjusting the color scheme from what I've read online, but no luck. This banner/ footer carousel is at the bottom of my homepage.

Edited October 29 by erikb954

tuanphan · October 1

On 9/23/2024 at 12:59 AM, erikb954 said:

This worked well, thank you - I do have one issue with my background color though. I would like the background of the carousel to be black and match the rest of my site. Can you please help? My images are transparent backgrounds and I've tried adjusting the color scheme from what I've read online, but no luck. This banner/ footer carousel is at the bottom of my homepage.

Site: https://www.blacksheepbeardco.com/

Pw: password

You can use this to Website Tools > Custom CSS

section[data-section-id="66f032ef8a14754d7c3360f3"] {
    background-color: #000;
}

erikb954 · October 4

That worked! Thank you so much!

Andreas4 · October 8

Thanks @tuanphan!
Is there any way to:

1. Add rounder corners on the images.
2. Make them slide to the right.
3. Make the height customizable for mobile view.

Edited October 8 by Andreas4

tuanphan · October 9

23 hours ago, Andreas4 said:

Thanks @tuanphan!
Is there any way to:

1. Add rounder corners on the images.
2. Make them slide to the right.
3. Make the height customizable for mobile view.

#1. Use this to Custom CSS box

.slide img {
    border-radius: 30px;
}

#2. Change this line

@keyframes scrollLeft {
	0% { transform: translateX(0); }
  100% {transform: translateX(calc(-250px * 30));}
}

to this

@keyframes scrollLeft {
	0% { transform: translateX(calc(-250px * 30)); }
  100% {transform: translateX(0);}
}

#3. Can you share link to page where you added the code? I can check easier

Andreas4 · October 9

Hi @tuanphan, I moved forward with another solution. Thank you so much for your reply.

Lindseyfay01 · October 17

Hello, I used the above code and it worked great, however, it changed the layout of the instagram grid (on experience page) . When I remove the code the instagram grid goes back to normal.

It does the same for the testimonial summary on the experience page also.

site: https://violet-sheep-6mdg.squarespace.com/

password: sogoodphotobooth

Edited October 17 by Lindseyfay01

tuanphan · October 17

3 hours ago, Lindseyfay01 said:

Hello, I used the above code and it worked great, however, it changed the layout of the instagram grid (on experience page) . When I remove the code the instagram grid goes back to normal.

It does the same for the testimonial summary on the experience page also.

site: https://violet-sheep-6mdg.squarespace.com/

password: sogoodphotobooth

You can use code to Homepage Header Injection, the code will run on Homepage Only

To find Homepage Header Injection, just access Main Navigation or Not Linked > Hover on Homepage > Click Gear icon > Click Advanced > Paste code to right box.

Rustynz · October 18

I'll be the one to say it: THIS IS TOO COMPLICATED. We need a simple product drop solution like everything else in SS. It blows my mind that this does not exist. It literally exists on every other CMS in the world as a stock standard feature.

orphicremora · October 28

@tuanphan is it possible to make the scrolling section clickable to go to an external link?

I'm using this as a scrolling advertisement that I would want to be able to click on to send my website viewers to my ad sponsors website/external link, but putting a link in each individual image doesn't seem to make the images clickable.

tuanphan · October 29

17 hours ago, orphicremora said:

@tuanphan is it possible to make the scrolling section clickable to go to an external link?

I'm using this as a scrolling advertisement that I would want to be able to click on to send my website viewers to my ad sponsors website/external link, but putting a link in each individual image doesn't seem to make the images clickable.

You can add link, then use this new code. Remember to replace Section ID in the code

<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 links = $('section[data-section-id="6720b7976adaef266e5bba95"] a');
        if (links.length > 0) {
            for (let j = 0; j < 10; j++) {
                for (let i = 0; i < links.length; i++) {
                    let href = $(links[i]).attr('href');
                    let imgSrc = $(links[i]).find('img').attr('data-src');
                    addLeft += '<div class="slide"><a href="' + href + '"><img src="' + imgSrc + '" alt="" /></a></div>';
                }
            }
            addLeft += '</div></div>';
            $(addLeft).prependTo('section[data-section-id="6720b7976adaef266e5bba95"]');
            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>

Rustynz · October 30

Insanely complicated for what should be a stock standard out of the box option.

Witness · November 10

@tuanphan Thank you for all of this amazing code!

Question for you, is there a way to keep the scrolling logos inside the gallery grid box? Instead of having them go from section edge to section edge. I would like to have margin on either side of the scrolling logo box and the ability for it to be a different color from the section background.

In the image you can see what I'm creating. I would love to have the scrolling logos on the blue background, but have the blue box of scrolling logos be the same width as the white box. I'm currently using your gallery block code in 7.1.

tuanphan · November 12

On 11/10/2024 at 12:10 PM, Witness said:

@tuanphan Thank you for all of this amazing code!

Question for you, is there a way to keep the scrolling logos inside the gallery grid box? Instead of having them go from section edge to section edge. I would like to have margin on either side of the scrolling logo box and the ability for it to be a different color from the section background.

In the image you can see what I'm creating. I would love to have the scrolling logos on the blue background, but have the blue box of scrolling logos be the same width as the white box. I'm currently using your gallery block code in 7.1.

We can use overflow hidden to prevent this. If you share link to page, I can check & give you code

fondarts · November 19

Hey! Is there a way to apply the code without code injection? I have the basic plan and it doesn't let me.

Thanks.

tuanphan · November 21

On 11/20/2024 at 4:33 AM, fondarts said:

Hey! Is there a way to apply the code without code injection? I have the basic plan and it doesn't let me.

Thanks.

With Basic Plan

In Step #3

You can add a Section under Gallery Grid > Add a Markdown Block > Paste #3 code

Then if it works, let me know, I will give extra code to hide this extra section

Ziggy · Tuesday at 10:14 AM

Try this:

https://www.will-myers.com/articles/auto-scroll-for-carousel-banner-slideshows-for-auto-layout-sections-in-squarespace-71

Neonic · Tuesday at 05:33 PM

On 6/2/2024 at 1:23 PM, tuanphan said:

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.

I added this code to my footer and it made my other sections image really small. The autoscroll worked though haha

[Share] Auto Scroll Gallery Grid

Recommended Posts

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

azaslona123

tuanphan

Posted Images

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources