Jump to content

How to create an automatic carousel / image slider?

Recommended Posts

  • Replies 3
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

It is Gallery Section - Reel then use some custom code to make it autoscroll

When you add a section > Choose "Images" from the list > Then choose section with (i) icon on right > Then edit section > Change to Reel layout



And to make it autoscroll, you can add this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active) .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn")
  }, 2000);



Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Thanks so much!! Although I tried that code and it didn't work so I searched around for a similar question and found another one that did work for me (I'm not sure why that is though):

(function docReady(fn) {
	// see if DOM is already available
	if (document.readyState === "complete" || document.readyState === "interactive") {
		// call on next available tick
		setTimeout(fn, 1);
	} else {
		document.addEventListener("DOMContentLoaded", fn);
})(() => {
	if (window.location == window.parent.location) {
		const reelControls = document.querySelectorAll('.gallery-reel-control [aria-label="Next Slide"]');
		reelControls.forEach(reelControl => {
			(function reelTimer() {
				setTimeout(() => {
				}, 2000); // change this value to change the speed


Link to comment

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.