Request: add mouse dragging for desktop users

[matthewbuchanan]

I’ve looked at a number of sliders recently, and I really like the ones which include mouse dragging as a method of desktop navigation. Is it possible to add this to FlexSlider (would work well with its responsive features)?

[zabatonni]

i would appreciate this feature as well

[akobashikawa]

I implemented this feature in this way:

• Use jquery.event.drag (http://threedubmedia.com/code/event/drag/)

• In jquery.flexslider.js, copy mousewheel support block as base for drag support:

  ...
  // MOUSEWHEEL:
  if (vars.mousewheel) {
  slider.bind('mousewheel', function(event, delta, deltaX, deltaY) {
  event.preventDefault();
  var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
  slider.flexAnimate(target, vars.pauseOnAction);
  });
  }
  // DRAG:
  if (vars.drag) {
  slider.bind('drag', function(event, delta) {
  event.preventDefault();
  var target = (delta.deltaX < 0) ? slider.getTarget('next') : slider.getTarget('prev');
  slider.flexAnimate(target, vars.pauseOnAction);
  });
  }
  ...

• Also add 'drag' in flexslider defaults:
  ...
  $.flexslider.defaults = {
  ...
  mousewheel: false,
  drag: false,
  ...

• Then, in your script use 'drag: true' if you want:

  $('.flexslider').flexslider({
  animation: 'slide',
  slideshow: false,
  drag: true
  });

[mattyza]

While this does sound interesting, it's not currently on our road map.

If you have time, we welcome any and all pull requests for review and would appreciate a pull request on this. :)

[crsrusl]

I would also LOVE for this feature to exist in FlexSlider. It would make it amazing flexible. FlexibleSlider!

[marcamos]

+1

[ActionScripted]

+1

[craigashby]

+1

[wpexplorer]

+1

[ericalli]

+1

[philburton]

+1

[yurenlimbu]

+1

[rkakrik]

+1

[rkakrik]

Jquery.event.drag is no longer maintained. I find this library: https://github.com/mmikowski/jquery.event.ue
And similarly to example @akobashikawa:

if (slider.vars.drag) {
          slider.bind('udragstart.udrag', function(event) {
            event.preventDefault();
            var target = (event.px_delta_x < 0) ? slider.getTarget('next') : slider.getTarget('prev');
            slider.flexAnimate(target, slider.vars.pauseOnAction);
          });
        }

[nicoworq]

+1