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.
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.
Share Improve this question edited Dec 9, 2018 at 19:58 FalsePride 633 silver badges12 bronze badges asked Jun 10, 2013 at 20:57 JohnJohn 3,1158 gold badges41 silver badges73 bronze badges1 Answer
Reset to default 15HTML:
<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