Disable dragging for sliders?

Hey guys,

I’m having a UX problem with the sliders. Basically I have content inside a slider that encourages clicking and dragging, but this causes the slider to slide to the next or previous slide, which I don’t want at all. I only want the sliders to change when the next/previous buttons are clicked.

Just wondering if anyone knows how to disable this dragging (and touch swiping) behaviour? Perhaps there’s a code tweak after export that will do it?

Cheers,
Kirill

1 Like

Hi @Kirill_Kat,

You can disable the swipe by adding the following custom code just before the </body>

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

This will disable the swipe gesture for both desktop and touch devices, but only on publish & export of your webflow site. (the swipe will still be active during preview mode)

Hope that helps!
-Dan

5 Likes

Hi Danro,

Could I question you for a custom code script to keep keep the auto slide changes of Webflow Sliders, but disable the ability function of the next/previous buttons?

My reason: I like to use a lot of Sliders as slideshows of my photography, and set them to auto play. On phones and tablets, I do not want my visitors to stop the auto play feature of my photographs by touching a Slider to scroll my pages. Hope my explanation make sense.

Many thanks,
Chris

Thanks Dan! I’ll try it out :slight_smile:

Hi @Chris_Lo_Bue,

Try giving them a class and and setting it to “display: none” for tablets and smaller.

Cheers,
Kirill

@Chris_Lo_Bue Try using this snippet to prevent the auto-play timer from being interrupted:

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

Thanks Danro,

I tried your code and it worked nicely. Combined with Kirill_Kat’s idea to not display the arrows, I’m happy!

Many Thx
Chris

@danro, I need a similar ability to turn off mouse click interactions to use the slideshow as a small title page background for a site I am working on. Is it possible to disable mouse clicks to allow the slider to loop auto play without interruption? I tried the script listed here, but I think something has changed. Disabling swipe still works, but I cannot disable mousedown.

@vlogic Can you post an example of this behavior, and let us know which browser you are testing in? Thanks!

@danro

I’m bringing up this conversation because I tried this $(‘.w-slider’).off(‘swipe’); code, and it doesn’t seem to work. Is it because it’s still hosted on Webflow (sitename.webflow.io) ?

  1. If yes, is there a workaround so that it works even when it’s hosted on webflow.io ?

  2. If not, then maybe it’s because there’s been updates and this code needs a fix ?

  3. And can I specify a precise slider (not disable it for every sliders in the page), for instance, instead of .w-slider > .w-slider.slider1 ?

Thank you so much for all this kind help !

@Zacchino as a workaround you can put both your slider and another div into a container element with position:relative, then set your second div to be position absolute with width and height 100% and give it a greater z-index than the slider, with opacity 0% :smile:

2 Likes

Hello @Arthur

This solution you gave looks like it’ll work but it’s not very clean code-wise. I’d really like to use the following code:

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

Is it still a valid script (does it work) ?

Hey @Zacchino, good catch!

I can confirm that this code no longer works. We’ll be pushing a better solution for this soon.

2 Likes

Update: we’ve added an option to the Slider settings panel to disable swipe gestures.

You can find the new setting here:

Should eliminate the need for the custom code hack :slight_smile:

Hope that helps!

4 Likes

Awesome Dan! Thanks so much for this.

@danro

Oh my… I wish I could kiss you guys right now. On the cheek.

Thank you so much @Danro and @webflow and to whoever added this miracle checkbox!

I’m using it right away.

1 Like