Slider dragging

[joanna-s]

Hello,

Firstly, thank you for this excellent plugin, it's working really well so far. I'm just working on some customisations and had a question.

Is it possible to move the slides with mouse drag? At the moment you perform the dragging action but the slider only starts to move on mouse off.

Thanks :)

Jo

[lukeed]

Hey Jo, thanks!

Are you using the listeners.drag option? It enables this demo

[lukeed]

Oh oh, I see what you mean. I misread :)

The reason it was like this initially was because the transforms/positioning is handled thru CSS. Because of this, you won't be able to get a fluid X movement as your finger moves... there have to be thresholds in place to trigger the update of all slides' classnames. I moved that "threshold decider" to the mouseup handler for safety, really.

You can try this though. I haven't tested it out but it should be nearly there.

// features/mouseDrag/index.js

import {on, off} from '../../shared';

export default function () {
    var self = this,
        parent = this.el.parent,
        start, delta,

        handleDown = function (e) {
            start = e.x;
            delta = 0;
        },

        // Changed!
        handleMove = function (e) {
            e.preventDefault();
            // Change 50 to custom threshold 
            if (Math.abs(delta = e.x - start) > 50) {
                self.el[delta > 0 ? 'prev' : 'next']();
            }
        },

        // handleUp = function () {
        //  if (Math.abs(delta) > 50) {
        //      self.el[delta > 0 ? 'prev' : 'next']();
        //  }
        // };

    // mouse cursor
    classie.add(parent, 'draggable');
    on(parent, 'mousedown', handleDown);
    on(parent, 'mousemove', handleMove);
    // on(parent, 'mouseup', handleUp);

    this.el.on('destroy', function () {
        console.log('mousedrag: destroy');
        classie.remove(parent, 'draggable');
        off(parent, 'mousedown', handleDown);
        off(parent, 'mousemove', handleMove);
        // off(parent, 'mouseup', handleUp);
    });
}

Because it's changing the core code, you'd have to build a custom Bee3D script. There isn't an easy way to do it thru event handlers since the (original) handleUp will still be firing and cause your slider to navigate an extra slide in either direction.

Hope that helps!