All geek questions in one place

How to create a mouse slider for HTML elements?

Many slider plugins that I found, either only to view the next image, or, if they have the ability to drag and drop with the mouse or touch, only allow images. Does anyone know of a plugin or a possible way to encode a slider to move the mouse for any html elements? I specifically use SVG, but it would be nice to have something in the future for sliding between div elements.

+5
source share
1 answer

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

+16
source

Source: https://habr.com/ru/post/1485515/

More articles:


All Articles