MouseMove Slider

[email protected]

HTML

<div class="item-photo">
    <div class="item-photo-wrapper">
        <ul>
            <li>
                <img src="http://placehold.it/120x120&text=1" />
            </li>
            
        </ul>
    </div>
</div>

CSS

.item-photo {
    position:relative;
    overflow: hidden;
    margin: 0px;
    width: 200px;
    height: 200px;
}
.item-photo-wrapper {
    white-space: nowrap;
}
.item-photo-wrapper li {
    display: inline-block;
    height: 100%;
}
.item-photo-wrapper {
    position:absolute;
}
.item-photo img {
    max-width: 100%;
    height: 100%;
}
ul {
    margin: 0px;
    padding: 0px;
}

JavaScript

$(function () {

    var $bl = $(".item-photo"),
        $th = $(".item-photo-wrapper"),
        blW = $bl.outerWidth(),
        blSW = $bl[0].scrollWidth,
        wDiff = (blSW / blW) - 1, // widths difference ratio
        mPadd = 20, // Mousemove Padding
        damp = 20, // Mousemove response softness
        mX = 20, // Real mouse position
        mX2 = 0, // Modified mouse position
        posX = 0,
        mmAA = blW - (mPadd * 2), // The mousemove available area
        mmAAr = (blW / mmAA); // get available mousemove fidderence ratio

    $bl.mousemove(function (e) {
        mX = e.pageX - this.offsetLeft;
        mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
    });

    setInterval(function () {
        posX += (mX2 - posX) / damp;
        $th.css({
            marginLeft: -posX * wDiff
        });
    }, 10);

});