Question

36

How to create a mouse drag slider for HTML elements?

rated 0 times [ 38] [ 2] / answers: 1 / hits: 32426 / 11 Years ago, mon, june 10, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

beatrizrheaq

Add To Favorites

Follow

Total Points: 73

Total Questions: 89

Total Answers: 107

Location: Jersey

Member since Fri, Oct 1, 2021

3 Years ago

beatrizrheaq questions

1 Unchecked runtime.lastError: Cannot access contents of url . Extension manifest must request permission to access this host. In manifest 3

Sat, Apr 24, 21, 00:00, 3 Years ago

1 Cannot assign to read only property 'property' of object '#< Object>'

Tue, Feb 9, 21, 00:00, 3 Years ago

1 Material UI - How to stretch Grid container to parent height and width

Tue, Aug 11, 20, 00:00, 4 Years ago

1 date-fns - is there a way to get short date format string

Wed, Jan 29, 20, 00:00, 4 Years ago

1 How can I receive arbitrary props in a Svelte component and pass to a child component?

Tue, Dec 17, 19, 00:00, 5 Years ago

View All

answered 11 Years ago briannar · Accepted 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