Prevent index slideshow pausing on mouseover

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;
}

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!

Hey guys, 
This also seems to stop you being able to click on gallery items, in this case I have Vimeo links but they aren't working when I use this code. 
If anyone had a fix would be great. 

Thanks

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!

@NathanT Can you send me the site you're working on so I can take a look?

hello, did anyone find out how to not pause the slideshow but keep images clickable? 

@phlllpp are you wanting the slideshow to keep moving even when you hover over it?

yes! that's what I try to do ... any hints?

I have the same issue, index gallery will pause on hover. Tried different codings I found but none are working... any ideas? 

@RyanDejaegher @popandporter falling in line, similar issue here. I want my homepage's slideshow arrow to still be clickable, but without the hover-event creating a grey background. Essentially I want the arrow to stay exactly the same when hovered over.

http://www.alycefayeoriginals.com/

pw: arrowhoverfix

Thanks in advance!

I discovered this code - genius 🙂

https://sf.digital/squarespace-solutions/how-can-i-prevent-the-index-slideshow-pausing-on-mouseover

PopandPorter's solution does not work for my site (it's a 7.0 Brine template). What DOES work for me is the following:

/* Index Gallery Slideshow - prevent pause on hover */ 
.Index-gallery {
   pointer-events:none;
 }
.Index-gallery a, .Index-gallery-control, .Index-gallery-indicators {
   pointer-events:auto;
 }