Smooth Div Scroll

A fiddle with the basic setup for the jQuery plugin Smooth Div Scroll.

by sbaydakov

HTML

<script src="http://www.smoothdivscroll.com/js/jquery.mousewheel.min.js"></script>
<script src="http://www.smoothdivscroll.com/js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.kinetic.js"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.smoothdivscroll-1.3-min.js"></script>
<div id="makeMeScrollable">
    <img src="http://www.smoothdivscroll.com/images/demo/field.jpg" alt="Field" id="field" />
    <img src="http://www.smoothdivscroll.com/images/demo/gnome.jpg" alt="Gnome" id="gnome" />
    <img src="http://www.smoothdivscroll.com/images/demo/pencils.jpg" alt="Pencils" id="pencils" />
    <img src="http://www.smoothdivscroll.com/images/demo/golf.jpg" alt="Golf" id="golf" />
    <img src="http://www.smoothdivscroll.com/images/demo/river.jpg" alt="River" id="river" />
    <img src="http://www.smoothdivscroll.com/images/demo/train.jpg" alt="Train" id="train" />
    <img src="http://www.smoothdivscroll.com/images/demo/leaf.jpg" alt="Leaf" id="leaf" />
    <img src="http://www.smoothdivscroll.com/images/demo/dog.jpg" alt="Dog" id="dog" />
</div>

CSS

@import url(http://www.smoothdivscroll.com/css/smoothDivScroll.css);

#makeMeScrollable
{
    width:100%;
    height: 330px;
    position: relative;
    overflow: hidden;
}
        
#makeMeScrollable div.scrollableArea img {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

JavaScript

// Initialization
$("div#makeMeScrollable").smoothDivScroll({});