Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
casson

Prevent index slideshow pausing on mouseover

Question

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

 

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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!

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...