How do you automate a hero slide show in Squarespace 7.1

Site URL: https://www.upcyclepianocraft.com/

Hi there, I've added a slide show of hero shots to my home page and I'd like to get them to advance automatically but there's no setting for that. I'm kinda surprised! Is there a way to do this in 7.1?

On 6/18/2022 at 5:45 AM, tommb said:

Site URL: https://www.upcyclepianocraft.com/

Hi there, I've added a slide show of hero shots to my home page and I'd like to get them to advance automatically but there's no setting for that. I'm kinda surprised! Is there a way to do this in 7.1?

Add to Settings > Advanced > Code Injection > Header

<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('.user-items-list-banner-slideshow__arrow-button--right');
		reelControls.forEach(reelControl => {
			(function reelTimer() {
				setTimeout(() => {
					reelControl.click();
					reelTimer();
				}, 2000); // change this value to change the speed
			})();
		})
	}
});
</script>

Thank you so much @tuanphan, this is brilliant! 💥

This was perfect! Thank you!