如何为HTML元素创建鼠标拖动滑块？ [英] How to create a mouse drag slider for HTML elements?

问题描述

我找到的许多滑块插件只是点击查看下一张图片，或者如果他们确实有鼠标拖动或拖动功能，只允许图片。有谁知道插件或可能的方式来编写任何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> 
  

CSS：

  #slider {
 width：400px; 
 overflow：hidden; 
} 
 ul {
 list-style：none; 
保证金：0; 
 padding：0; 
} 
 li {
 width：400px; 
 height：400px; 
 float：left; 
 
  

JS：

<$ $（$＃$）$（$＃$）$（$＃$） '）.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代码

Many slider plugins that I have found are either only click to view next image or, if they do have mouse drag or touch drag capabilities, only allow images. Does anyone know of a plugin or possible way to code a mouse drag slider for any html elements? I'm specifically using an SVG, but it would be nice to have something in the future for sliding between div elements.

解决方案

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 code

这篇关于如何为HTML元素创建鼠标拖动滑块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！