2012/09/24

Resolviendo Soporte Drag para Flexslider

Es posible usar el plugin jquery.event.drag para proveer soporte para drag a Flexslider (es decir que permita arrastrar los sliders con el ratón en el desktop, de modo similar a como permite hacerlo en un dispositivo tipo touch):

- Usando el plugin jquery.event.drag (http://threedubmedia.com/code/event/drag/)
- En jquery.flexslider.js, copio el bloque que da soporte a mousewheel y lo uso como base para el soporte para drag:
...
// 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);
  });
}
...

- También agrego 'drag' en los defaults de flexslider:
...
$.flexslider.defaults = {
  ...
  mousewheel: false,
  drag: false,
...

- Entonces, en el script, se puede usar 'drag: true' cuando se requiera:

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

Referencia:  Request: add mouse dragging for desktop users

Más artículos