Jump to content

Prevent index slideshow pausing on mouseover

Recommended Posts

Hi,

I've put a Slideshow Gallery at the top of an Index Page in the Brine template. It has three images that transition. By default when the mouse hovers over an image the slideshow pauses and you cannot prevent this automatic pausing without a code injection. I would like the slideshow to continue on mouseover however I still need the website visitor to be able to press a gallery dot/arrow indicator or press a 'Call to Action' link in the image content body text. How can this be achieved? The code below prevents the index slideshow pausing on mouseover but it also switches off all mouse pointer events...

/* Index Gallery Slideshow - prevent pause on hover */
.tweak-index-gallery-layout-slideshow .Index-gallery-wrapper {
 pointer-events: none!important;
}
.tweak-index-gallery-layout-slideshow .Index-gallery-wrapper .Index-gallery-control {
  pointer-events: auto;
}

 

Link to comment
  • 1 month later...

Hi Casson,

It looks like you just need to add the !important tag after the auto on the second command:

/* Index Gallery Slideshow - prevent pause on hover */
.tweak-index-gallery-layout-slideshow .Index-gallery-wrapper { pointer-events: none !important; }
.tweak-index-gallery-layout-slideshow .Index-gallery-wrapper .Index-gallery-control { pointer-events: auto !important; }

I just tried this on a couple of my sites and it seemed to work fine. Hope this helps!

Link to comment
  • 1 month later...
  • 4 weeks later...

Thanks for the code popandporter.

 

Would you know how to make mouseover stop a sliding gallery page (non index)? Currently my gallery pages continue to scroll even with mouseover and i'd like to prevent this when the user is hovering.

 

Thanks

On 1/16/2020 at 5:21 PM, popandporter said:

Hi Casson,

It looks like you just need to add the !important tag after the auto on the second command:


/* Index Gallery Slideshow - prevent pause on hover */
.tweak-index-gallery-layout-slideshow .Index-gallery-wrapper { pointer-events: none !important; }
.tweak-index-gallery-layout-slideshow .Index-gallery-wrapper .Index-gallery-control { pointer-events: auto !important; }

I just tried this on a couple of my sites and it seemed to work fine. Hope this helps!

 

Link to comment
  • 2 months later...
  • 3 weeks later...
  • 1 month later...
  • 2 months later...
  • 1 month later...

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.