Search code examples
jquerycssdrag-and-dropscrollslideshow

Dragging pictures in a slideshow


I've googled around for a while but can't find an answer for this. I have a slideshow type div on my site, where you can use the scrollbar to look through the images.

<div id="container" style="overflow-x: scroll; overflow-y: hidden; width: 700px; height: 300px;">
    <div class="content" style="float: left; width: 700px; height: 300px; background: url('images/1.png')"></div>
    <div class="content" style="float: left; width: 700px; height: 300px; background: url('images/2.png')"></div>
    <div class="content" style="float: left; width: 700px; height: 300px; background: url('images/3.png')"></div>
</div>

just so you get the idea.. What I'd like to do is have the user able to use their mouse on the picture itself and swipe the divs, instead of using the scroll bar. Im assuming this would use jquery with drag and drop. honestly I don't really know where to start, any ideas?


Solution

  • I think THIS is what you are looking for :)

    A jQuery project that makes you able to swipe it either with your mouse or with a cellphone