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

image.thumb.png.ad3f714de6918a30caca85a99910d7d9.png

image.png.10493753f5fef5205b1e1896e8e6cd74.png

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>
<script>
$(function(){
  window.setInterval(function(){
    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active) .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn")
    [0].click()}     
  }, 2000);
});
</script>

 

 

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):
 

<script>
(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(() => {
					reelControl.click();
					reelTimer();
				}, 2000); // change this value to change the speed
			})();
		})
	}
});
</script>

 

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.