Jump to content

Pause Summary Carousel Auto-Rotation on Hover

Recommended Posts

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!

screenshot-www.anexceptionallife.com-2021.09.24-13_01_22.png

Link to comment
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!

screenshot-www.anexceptionallife.com-2021.09.24-13_01_22.png

You need to modify your javascript:

image.png.a3830665f62d444757b6c9bc81172a35.png

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

Press 👍  or mark my comment as solution if you find my sharing useful

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment
  • 3 weeks later...
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.

Extra_Space.png

It looks fine to me. Did you solve it?

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

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.