carouFredSel scroll on mouse press

Question

I need to make a carousel which would keep scrolling on mousedown and stop when mouse is up. Got this example working on hover. How to change it to work on mousedown?

$("#foo2").carouFredSel({
    auto    : {
        items           : 1,
        duration        : 1500,
        easing          : "linear",
        timeoutDuration : 0
    }
}).trigger("pause");

$("#foo2_prev").hover(function() {
    $("#foo2").trigger("configuration", ["direction", "right"]);
    $("#foo2").trigger("play");
}, function() {
    $("#foo2").trigger("pause");
}).click(function() {
    return false;
});

$("#foo2_next").hover(function() {
    $("#foo2").trigger("configuration", ["direction", "left"]);
    $("#foo2").trigger("play");
}, function() {
    $("#foo2").trigger("pause");
}).click(function() {
    return false;
});

Answer 1

The carouFredSel initialization code can remain the same. Then use the following code to trigger the events on mousedown and mouseup instead of on hover.

this.$("#foo2_prev").mousedown(function() {
    me.$("#foo2").trigger("configuration", ["direction", "right"]);
    me.$("#foo2").trigger("play");
});

this.$("#foo2_next").mousedown(function() {
    me.$("#foo2").trigger("configuration", ["direction", "left"]);
    me.$("#foo2").trigger("play");
});

this.$("#foo2_prev, #foo2_next").mouseup(function() {
    console.log("mouseup");
    me.$("#foo2").trigger("pause");
});