jQuery Image Scroll using Mouse Wheel + Hover

On Mouse Over the jQuery Carousel will scroll from Left to right with Smooth Animation. Smooth Div Scroll plugin add more easy way to do this.
This Work with On Mouse Over the Arrow and also Mouse Scroll over Picture.

More Plugin Options were found there, which may customize as per your option.

Download Demo view-source

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type='text/javascript' src='http://smoothdivscroll.com/js/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='http://smoothdivscroll.com/js/jquery.mousewheel.min.js'></script>
<script src="http://smoothdivscroll.com/js/jquery.smoothdivscroll-1.3-min.js"></script>

<style type="text/css">
    
    #makeMeScrollable
    {
        width:100%;
        height: 330px;
        position: relative;
    }

    #makeMeScrollable div.scrollableArea *
    {
        position: relative;
        display: block;
        float: left;
        margin: 0;
        padding: 0;
        /* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    /* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */

    /* Invisible left hotspot */
    div.scrollingHotSpotLeft
    {
        /* The hotspots have a minimum width of 100 pixels and if there is room the will grow
        and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
        min-width: 75px;
        width: 10%;
        height: 100%;
        /* There is a big background image and it's used to solve some problems I experienced
        in Internet Explorer 6. */
        background-image: url(http://smoothdivscroll.com/images/big_transparent.gif);
        background-repeat: repeat;
        background-position: center center;
        position: absolute;
        z-index: 200;
        left: 0;
        /*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
        cursor: url(http://smoothdivscroll.com/images/cursors/cursor_arrow_left.png), url(http://smoothdivscroll.com/images/cursors/cursor_arrow_left.cur),w-resize;
    }

    /* Visible left hotspot */
    div.scrollingHotSpotLeftVisible
    {
        background-image: url(../images/arrow_left.gif);                
        background-color: #fff;
        background-repeat: no-repeat;
        opacity: 0.35; /* Standard CSS3 opacity setting */
        -moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
        filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
        zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
    }

    /* Invisible right hotspot */
    div.scrollingHotSpotRight
    {
        min-width: 75px;
        width: 10%;
        height: 100%;
        background-image: url(http://smoothdivscroll.com/images/big_transparent.gif);
        background-repeat: repeat;
        background-position: center center;
        position: absolute;
        z-index: 200;
        right: 0;
        cursor: url(http://smoothdivscroll.com/images/cursors/cursor_arrow_right.png), url(http://smoothdivscroll.com/images/cursors/cursor_arrow_right.cur),e-resize;
    }

    /* Visible right hotspot */
    div.scrollingHotSpotRightVisible
    {
        background-image: url(http://smoothdivscroll.com/images/arrow_right.gif);
        background-color: #fff;
        background-repeat: no-repeat;
        opacity: 0.35;
        filter: alpha(opacity = 35);
        -moz-opacity: 0.35;
        zoom: 1;
    }

    /* The scroll wrapper is always the same width and height as the containing element (div).
       Overflow is hidden because you don't want to show all of the scrollable area.
    */
    div.scrollWrapper
    {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

    div.scrollableArea
    {
        position: relative;
        width: auto;
        height: 100%;
    }   
</style>

<body>
        <div id="makeMeScrollable">
            <img src="http://smoothdivscroll.com/images/demo/field.jpg" alt="Field" id="field" />
            <img src="http://smoothdivscroll.com/images/demo/gnome.jpg" alt="Gnome" id="gnome" />
            <img src="http://smoothdivscroll.com/images/demo/pencils.jpg" alt="Pencils" id="pencils" />
            <img src="http://smoothdivscroll.com/images/demo/golf.jpg" alt="Golf" id="golf" />
            <img src="http://smoothdivscroll.com/images/demo/river.jpg" alt="River" id="river" />
            <img src="http://smoothdivscroll.com/images/demo/train.jpg" alt="Train" id="train" />
            <img src="http://smoothdivscroll.com/images/demo/leaf.jpg" alt="Leaf" id="leaf" />
            <img src="http://smoothdivscroll.com/images/demo/dog.jpg" alt="Dog" id="dog" />
        </div>
</body>

<script type="text/javascript">
    // Initialize the plugin with no custom options
    $(document).ready(function () {
        // I just set some of the options
        $("#makeMeScrollable").smoothDivScroll({
            mousewheelScrolling: "allDirections",
            manualContinuousScrolling: true,
            autoScrollingMode: "onStart"
        });
    });
</script>