JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<div id="parent">
    <div id="propertyThumbnails">
      
        <img src="http://celebmafia.com/wp-content/uploads/2013/11/clara-alonso-photos-constantin-del-castillo-photoshoot_1.jpg" />
        <img src="http://3.bp.blogspot.com/-VI4XNLmujQc/UQd0bAYpG1I/AAAAAAAAaKA/1WIASAPBuqU/s1600/deepika_padukone_tanishq_photoshoot-1920x1080.jpg" />
        <img src="http://www.hdwallpapersinn.com/wp-content/uploads/2014/07/HD-Wallpapers.jpeg" />
    </div>
</div>

CSS

#parent {
    position:relative;
    margin:0 auto;
    height: 260px;
    width: 100%;
    background: #ddd;
}
#propertyThumbnails {
    position:relative;
    overflow:hidden;
    background:#444;
    width:100%;
    height:262px;
    white-space:nowrap;
}
#propertyThumbnails img {
    vertical-align: middle;
    height: 262px;
    display:inline;
    margin-left:-4px;
}
img {
    cursor: pointer;
}

JavaScript

$(function () {

    $(window).load(function () {

        var $gal = $("#propertyThumbnails"),
            galW = $gal.outerWidth(true),
            galSW = $gal[0].scrollWidth,
            wDiff = (galSW / galW) - 1, // widths difference ratio
            mPadd = 60, // Mousemove Padding
            damp = 20, // Mousemove response softness
            mX = 0, // Real mouse position
            mX2 = 0, // Modified mouse position
            posX = 0,
            mmAA = galW - (mPadd * 2), // The mousemove available area
            mmAAr = (galW / mmAA); // get available mousemove fidderence ratio
        
        console.log(wDiff);

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

        setInterval(function () {
            posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"	
            $gal.scrollLeft(posX * wDiff);
        }, 10);

    });
});