Pause Summary Carousel Auto-Rotation on Hover

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

Hi All,

I've implemented a summary block (using lazy summaries plug-in) to get a carousel of quotes rotating towards the bottom of my homepage. Currently everything is functioning exactly as I intended with one exception. I would like to have the carousel auto-rotation pause when someone hovers over the quote.

https://www.anexceptionallife.com/

Does anyone know if there's a specific javascript snippet I can use to target that block and pause on mouse-hover?

Thank you!

On 9/25/2021 at 3:01 AM, dubwebdev said:

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

Hi All,

I've implemented a summary block (using lazy summaries plug-in) to get a carousel of quotes rotating towards the bottom of my homepage. Currently everything is functioning exactly as I intended with one exception. I would like to have the carousel auto-rotation pause when someone hovers over the quote.

https://www.anexceptionallife.com/

Does anyone know if there's a specific javascript snippet I can use to target that block and pause on mouse-hover?

Thank you!

You need to modify your javascript:

Replace with the following script

$(document).ready(function() {
    try {
        var container = Y.one("#block-d3fe1f534bd0f0631332");
        var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container);
        gallery.setAttrs({
            "autoplay": true,
            "autoplayOptions": {
                "timeout": 6000,
                /*make this higher to decrease speed, lower to increase it*/
                "randomize": true,
            }
        });
        container._node.addEventListener("mouseover", () => {
            gallery.setAttrs({
                "autoplay": false
            })
        })

        container._node.addEventListener("mouseout", () => {
            gallery.setAttrs({
                "autoplay": true,
                "autoplayOptions": {
                    "timeout": 6000,
                    "randomize": true,
                }
            })
        })
    } catch (e) {
        console.error("Could not configure Gallery autoplay.", e);
    }
});

Hope work well for you

This worked @HoaLT - Very much appreciate your time and effort putting together the altered JS for me.

@HoaLT - I'm seeing a spacing issue on that section I didn't notice before - are you able to pinpoint where this is coming from?

I looked at the code but I can't figure out what's forcing the extra space. This results in a horizontal scroll bar I don't want.

On 10/19/2021 at 2:45 AM, dubwebdev said:

@HoaLT - I'm seeing a spacing issue on that section I didn't notice before - are you able to pinpoint where this is coming from?

I looked at the code but I can't figure out what's forcing the extra space. This results in a horizontal scroll bar I don't want.

It looks fine to me. Did you solve it?