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/ at time of original post:
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
Code:
Put this <style> snipped inside of your head section:
<style>
.sb-slider{
pointer-events: none;
}
</style>
Put this and the JQuery script before the </body> tag:
<script>
$('#outer-next').click(function(){
$('#inner-next').click();
});
$('#outer-back').click(function(){
$('#inner-back').click();
});
</script>
Either add outer-next and outer-back to the ID area of the elements you want to use as triggers, or replace those in the script with the id’s of the elements you want to use. Same goes for the native Webflow slider navigation which is targeted using inner-next and inner-back.
I edited this several months after the original post for clarity, if anyone has trouble they can either reply or message me directly.