Turn slider interactions off on some media-queries and turn on others

Community resources Webflow Tips
1

Continuing the discussion from Changing default slide in slider widget:

Hi @Gharb I know it’s been a while to answer you but this may be good for others who looking similar solutions.

For problem no.1, so far I don’t see a workaround but with recently feature added into designer, you can autoplay your slider and stop at 2nd slide. No fancy, but better than nothing :smiley:

Interesting part came from a solution to your next problem. Interesting because you want to turn off slider interactions on some media queries and turn on on others.

I found @danro already gave solutions to Turn Off Swipe for slider and to turn off mousedown (click) and touch to Prevent Autoplay timer from being interrupted here Disable dragging for sliders? - #2 by danro - General - Forum | Webflow

Both snippets are:

Turn off swipe

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
$('.w-slider').off('swipe');
});
</script>

and, Turn off mouse click and touch to interrupt autoplay timer.

<script>    var Webflow = Webflow || [];
Webflow.push(function () {
$('.w-slider').off('mousedown.w-slider touchstart.w-slider');
});
</script>

Okay, but… how can you call snippet you need for specific media-queries ?

In this world wild web :smile: , I found enquiry.js fortunately. It can detect media screens and let you call functions you need to do things. Its use is pretty simple and straightforward that you would hardly miss it.

enquire.register("max-width: 960px", function() {
 // your function here
});

Well, there you can set max-width to media screens that Webflow has defined as you can see them in Designer UI or webflow.css to target media devices you need.

To learn more also you can read this post on css-tricks about enquiry.js.

If anyone somehow have a chance experiencing it, please share here.

Thanks. Happy trying. Good luck and,
Cheers

4 Likes