New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Request: add mouse dragging for desktop users #214

Closed
matthewbuchanan opened this Issue Jul 2, 2012 · 19 comments

Comments

Projects
None yet
@matthewbuchanan

matthewbuchanan commented Jul 2, 2012

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

This comment has been minimized.

Show comment
Hide comment
@zabatonni

zabatonni Aug 18, 2012

i would appreciate this feature as well

zabatonni commented Aug 18, 2012

i would appreciate this feature as well

@akobashikawa

This comment has been minimized.

Show comment
Hide comment
@akobashikawa

akobashikawa Sep 24, 2012

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
    });

akobashikawa commented Sep 24, 2012

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

This comment has been minimized.

Show comment
Hide comment
@mattyza

mattyza Jun 11, 2013

Member

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. :)

Member

mattyza commented Jun 11, 2013

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. :)

@mattyza mattyza closed this Jun 11, 2013

@crsrusl

This comment has been minimized.

Show comment
Hide comment
@crsrusl

crsrusl Jul 1, 2013

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

crsrusl commented Jul 1, 2013

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

@marcamos

This comment has been minimized.

Show comment
Hide comment
@marcamos

marcamos commented Apr 30, 2014

+1

@ActionScripted

This comment has been minimized.

Show comment
Hide comment

ActionScripted commented Jun 25, 2014

+1

@craigashby

This comment has been minimized.

Show comment
Hide comment
@craigashby

craigashby commented Aug 14, 2014

+1

@wpexplorer

This comment has been minimized.

Show comment
Hide comment
@wpexplorer

wpexplorer commented Sep 23, 2014

+1

@ericalli

This comment has been minimized.

Show comment
Hide comment
@ericalli

ericalli commented Oct 11, 2014

+1

@philburton

This comment has been minimized.

Show comment
Hide comment
@philburton

philburton commented Dec 23, 2014

+1

@yurenlimbu

This comment has been minimized.

Show comment
Hide comment
@yurenlimbu

yurenlimbu commented Mar 23, 2015

+1

@rkakrik

This comment has been minimized.

Show comment
Hide comment
@rkakrik

rkakrik commented Apr 4, 2015

+1

@rkakrik

This comment has been minimized.

Show comment
Hide comment
@rkakrik

rkakrik Apr 4, 2015

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);
          });
        }

rkakrik commented Apr 4, 2015

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

This comment has been minimized.

Show comment
Hide comment
@nicoworq

nicoworq commented Jul 14, 2015

+1

@haxkep

This comment has been minimized.

Show comment
Hide comment
@haxkep

haxkep commented Mar 20, 2016

+1

@kubik101

This comment has been minimized.

Show comment
Hide comment
@kubik101

kubik101 commented Aug 3, 2016

+1

@lauraE3

This comment has been minimized.

Show comment
Hide comment
@lauraE3

lauraE3 commented Aug 25, 2016

+1

@Eiad

This comment has been minimized.

Show comment
Hide comment
@Eiad

Eiad commented Jan 5, 2017

+1

@piskello

This comment has been minimized.

Show comment
Hide comment
@piskello

piskello commented Jul 27, 2018

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment