Is there a way to code for 'Autoplay' to turn off after a user interacts with a Slideshow Gallery

Hello – I'm working on a site and my client has asked if there is a way to customise the Autoplay controls for a Slideshow Gallery (not a video). Squarespace only gives you the option to turn it on and off for a Slideshow Gallery, but I'm wondering if there's some code that would turn off the autoplay once a user has started clicking through on their own. 

Currently, because autoplay is on, it jumps around when you try to manually move it with the arrows. Is there a fix for this?

Example page on the site: https://tuatara-quillfish-agra.squarespace.com/recipients/2022-petra-basnakova
Password: bucharest23

Thanks!

11 minutes ago, D_Efinger said:

Hello – I'm working on a site and my client has asked if there is a way to customise the Autoplay controls for a Slideshow Gallery (not a video). Squarespace only gives you the option to turn it on and off for a Slideshow Gallery, but I'm wondering if there's some code that would turn off the autoplay once a user has started clicking through on their own. 

Currently, because autoplay is on, it jumps around when you try to manually move it with the arrows. Is there a fix for this?

Example page on the site: https://tuatara-quillfish-agra.squarespace.com/recipients/2022-petra-basnakova
Password: bucharest23

Thanks!

Slideshow is running the auto play > when the clients click the arrow > slideshow not autoplay until they refresh the page

Is it what you mean?

2 minutes ago, Beyondspace said:

Slideshow is running the auto play > when the clients click the arrow > slideshow not autoplay until they refresh the page

Is it what you mean?

Yes exactly! 

38 minutes ago, Beyondspace said:

Slideshow is running the auto play > when the clients click the arrow > slideshow not autoplay until they refresh the page

Is it what you mean?

Is this something you might be able to help with? Thanks. 

I would love that feature. Anyone can help? or have the autoplay time reset each time someone clicks the arrow.

On 2/20/2024 at 7:50 PM, Laticauda said:

I would love that feature. Anyone can help? or have the autoplay time reset each time someone clicks the arrow.

First turn off the autoplay of Gallery Slideshow:simple section, this script will autoplay the gallery until user clicks on the next arrow
 

<script>
// Wait for the DOM content to be fully loaded
window.onload = function() {
	if (window.self !== window.top) {
		return;
	}
    // Function to simulate clicking the next arrow
    function clickNext(arrow) {
        arrow.click();
    }

    var fullscreenSlideshows = document.querySelectorAll('.gallery-slideshow');

    // Set auto-scrolling for each carousel
    fullscreenSlideshows.forEach(function(slideshow) {
        var intervalId; // Variable to hold the interval ID
        // Query all elements with the class for carousel next arrows
        const arrows = slideshow.querySelectorAll('.gallery-slideshow-control-btn');
        arrows.forEach(function(arrow) {
            // Define a function to handle auto-scrolling for a specific carousel
            function autoScroll() {
                clickNext(arrow);
            }

            // Start the auto-scrolling for the current carousel
            if (arrow.getAttribute("aria-label") === "Next Slide") {
                console.log('auto click next arrow');
                intervalId = setInterval(autoScroll, 5000);
            }

            // Stop autoplay when the arrow is clicked
            arrow.addEventListener("click", function(e) {
                // Stop autoplay when it is user-triggered event
                if (e.offsetX || e.offsetY) {
                    console.log('user click')
                    clearInterval(intervalId);
                }
            });
        });
    });
};
</script>

cc @D_Efinger

For Gallery Section Slideshow: Full, the arrow selector is slightly different

<script>
// Wait for the DOM content to be fully loaded
window.onload = function() {
	if (window.self !== window.top) {
		return;
	}
    // Function to simulate clicking the next arrow
    function clickNext(arrow) {
        arrow.click();
    }

    var fullscreenSlideshows = document.querySelectorAll('.gallery-fullscreen-slideshow');

    // Set auto-scrolling for each carousel
    fullscreenSlideshows.forEach(function(slideshow) {
        var intervalId; // Variable to hold the interval ID
        // Query all elements with the class for carousel next arrows
        const arrows = slideshow.querySelectorAll('.gallery-fullscreen-slideshow-control-btn');
        arrows.forEach(function(arrow) {
            // Define a function to handle auto-scrolling for a specific carousel
            function autoScroll() {
                clickNext(arrow);
            }

            // Start the auto-scrolling for the current carousel
            if (arrow.getAttribute("aria-label") === "Next Slide") {
                // console.log('auto click next arrow');
                intervalId = setInterval(autoScroll, 5000);
            }

            // Stop autoplay when the arrow is clicked
            arrow.addEventListener("click", function(e) {
                // Stop autoplay when it is user-triggered event
                if (e.offsetX || e.offsetY) {
                    // console.log('user click')
                    clearInterval(intervalId);
                }
            });
        });
    });
};
</script>

cc @Laticauda