Javascript 如何为HTML元素创建鼠标拖动滑块？

我发现的许多滑块插件要么只是单击以查看下一幅图像，要么，如果它们确实具有鼠标拖动或触摸拖动功能，则只允许图像。有人知道为任何html元素编写鼠标拖动滑块的插件或可能的方法吗？我特别使用了SVG，但如果将来能在div元素之间滑动，那就太好了。

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>

JS:

$（函数（）{
var slides=$（'#slider ul'）.children（）.length；
var slideWidth=$（'#slider'）.width（）；
var min=0；
var max=-（（幻灯片-1）*幻灯片宽度）；
$（“#滑块ul”）.宽度（滑块*滑块宽度）.可拖动({
轴：“x”，
拖动：函数（事件、ui）{
如果（ui.position.left>min）ui.position.left=min；
如果（ui.position.left

---

我将如何实施幻灯片停止功能，其中一个人拖动了一半左右，而幻灯片有点卡入到位。

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

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