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:

Latest JQuery from
<script src="" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>




pointer-events: none;
backdrop-filter: blur(10px);