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?
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)
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.
@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.
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) ?
If yes, is there a workaround so that it works even when it’s hosted on webflow.io ?
If not, then maybe it’s because there’s been updates and this code needs a fix ?
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 ?
@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%