Streaming live at 10am (PST)

Controlling Slider/Preventing Hover Pause with JQuery

Hey everyone,

A few months ago there was a forum post I was active in where users were trying to maintain navigation control of a Webflow slider, but avoid having the slider pause on hover. Original post:

The solution I provided at the time was to use CSS to disable pointer events for everything except the slide navigation items.

.[slider-class] {
pointer-events: none;
}
.left-arrow, .right-arrow {
pointer-events: auto;
}

Back then I told a couple other members I’d find time to look at some other way of executing this and finally played around with it.

Using JQuery I just created a simple script that forces a click event on the hidden native Webflow slider navigation by clicking on another element, then disabled pointer-events for the entire slider. The trigger click can be assigned to essentially any element you want, its pretty simple.

Small example slider:
https://www.coderre.co/sandbox/slider-nav

Latest JQuery from https://jquery.com/:
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

Code:

<script>

$('#outer-next').click(function(){
 $('#inner-next').click();
});
$('#outer-back').click(function(){
  $('#inner-back').click();
});
</script>

<style>
.sb-slider{
pointer-events: none;
}
.sb-slider-nav-parent{
backdrop-filter: blur(10px);
}
</style>