javascript - HTML要素のマウスドラッグスライダーを作成するには?

Question

私が見つけた多くのスライダー プラグインは、クリックして次の画像を表示するか、マウス ドラッグまたはタッチ ドラッグ機能がある場合は画像のみを許可します。HTML要素のマウスドラッグスライダーをコーディングするプラグインまたは可能な方法を知っている人はいますか? 私は特に SVG を使用していますが、将来的には div 要素間をスライドできるものがあればいいのにと思います。

Answer 1

HTML:

<div id="slider">
    <ul>
        <li style="background-color: #F00"></li>
        <li style="background-color: #0F0"></li>
        <li style="background-color: #00F"></li>
    </ul>
</div>

CSS:

#slider {
    width: 400px;
    overflow: hidden;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    width: 400px;
    height: 400px;
    float: left;
}

JS:

$(function() {
    var slides = $('#slider ul').children().length;
    var slideWidth = $('#slider').width();
    var min = 0;
    var max = -((slides - 1) * slideWidth);

    $("#slider ul").width(slides*slideWidth).draggable({
        axis: 'x',
        drag: function (event, ui) {
        if (ui.position.left > min) ui.position.left = min;
            if (ui.position.left < max) ui.position.left = max;
        }
    });
});

jsFiddle コード