Hi, I have a full-screen slider on my landing page. Its purpose is to transition through some pictures automatically. However, I notice that when my mouse is hovering over the full-screen, the pictures are on pause and do not transition unless my mouse is off of the full-screen. This is not ideal.
I have looked throughout the forums and people are saying that they have the opposite problem, which is they need it to PAUSE ON HOVER. But it seems now the default is that it does indeed pause on hover, and I need it to NOT pause on hover! Why isnāt this a simple toggle?
Any help on how to resolve this, even some custom code would be appreciated!
I am having the same problem, seems like an oversight to simply disable it as full screen sliders are quite common place. Is there any code we can add to reverse this feature? A toggle in the setting would be much more appropriate but I think disabling the transitions after a users first interaction with the slider navigation is perhaps better practice, this way the user can take control of the slider but it doesnāt disable it unnecessarily. The whole purpose of a sliders is to change so why choose to fully disable its main function? Anyway would really love a fix if anyone has one please. Thank you.
If webflow made this into a default it would be one of the dumbest thing theyāve ever done.
I havenāt seen that many people asking for pause on hover, because why on earth would that be a thing?
it messes up the entire UX, confuses the site visitor completely, and destroys design concepts.
It took me a couple of days to even realize this was a feature! i thought it was a bug.
WE NEED TO REVERSE THIS ASAP! or at lease give us a work around instead of forcing on an entire community these arbitrary design functions 90% of webflow never asked for!
Especially when the slider is full page! a userās mouse pointer is automatically gonna be positioned somewhere on the page, which than would automatically pause the slider before the user even understands there is a slider function here! PLEASE STOP IT WITH YOUR WEIRD EXPERIMENTS AND LET US WORK IN PEACE!
@Marqueezy & @snc99 - This is definitely the right move, as most sliders include calls to action that need time to click. Using websites that contain clickable elements in sliders that donāt stop is terrible UX, so defaulting to this behavior is welcome.
You can get around this by giving your slider a negative z-index so it sits behind an element with a transparent backgroundāwhich prevents the hover from triggering and stopping the slider. You can see an example here:
For everyone coming across this thread while looking for a solution to prevent the āstop slider on hoverā default behaviour (like me), there is an easy solution:
add a custom class to your slider element and embed the following css as a custom embed:
.yourClass{
pointer-events:none;
}
Bear in mind this will make your slider completely non-interactive! Works great for a timed animation, etc.
And if anyone reading this is like me, and needs a child element to still be interactive (e.g. you want to disable pause on hover, yet you want links within the slider to still work) then simply target the element class that needs the functionality with:
I put a DIV below the slider (not in, but below in the object tree).
Absolute position, āfill allā (square button)
Width & height 100%
It actually also ācoversā the left/right arrows in the slider object. But clicks go through.
If the user clicks left/right button, the slideshow stops.
Iām actually not sure of the logic here and why itās working like it is, but it works almost as I want at least.
You can test it out at https://www.nilento.se
Hope this helps!
I could not get pointer-events code to work for me on this, but the following did work for me on 2 different Webflow sites:
Add this custom code to footer at page-level (before ):
<!-- Allow slider to auto-play even on hover -->
<script>
$(document).ready(function () {
setTimeout(function () {
$('.w-slider').unbind('mouseenter mouseleave');
})
});
</script>
hi @drew-eastmead I not familiar with jQuery but according to documentation the syntax is identical to javaScript. The unbind method accept the 2 parameters.unbind("string", function (){})
In your case you passing only string parameter 'mouseenter mouseleave' that return false because doesnāt exist. IMO you should use 2 unbind methods, one for mouseenter and one for mouseleave.
Hi @drew-eastmead !
I have tried your code and it works perfectly, but once I click on the native sliderās arrows, then the slides pause again.
Any line of code I could add to prevent that?
I tried code by @dwehrmann and this works perfectly but if the slider has a button or link element we canāt access it.
Targeting the link/button using -
.yourClass{
pointer-events:auto;
}
This code was sometimes acting well but sometimes still unable to interact.
Btw, while trying out things I found a simple solution without code for the same issue.
Give a class name to parent slider element and in the style panel under Events option select the none option.
This will work the same way as CSS code making pointers none and allowing slider animation to work even on mouse hover .
And if you have button or link element then select the button class make the cursor pointer and Events to Auto, stops the animation on hovering over the button/link only.
