JSFiddle - React, Tailwind, and code Playground

by isimpledesign

HTML

<script src="https://github.com/cowboy/jquery-throttle-debounce/raw/v1.1/jquery.ba-throttle-debounce.js"></script>
<div id="wrapper">
    <ul id="scroll-content">
        <li class="item"><img src="http://placehold.it/100x150/09f" /></li>
        <li class="item"><img src="http://placehold.it/100x150/2f2" /></li>
        <li class="item"><img src="http://placehold.it/100x150/234" /></li>
        <li class="item"><img src="http://placehold.it/100x150/342" /></li>
        <li class="item"><img src="http://placehold.it/100x150/312" /></li>
        <li class="item"><img src="http://placehold.it/100x150/131" /></li>
        <li class="item"><img src="http://placehold.it/100x150/111" /></li>
        <li class="item"><img src="http://placehold.it/100x150/222" /></li>
        <li class="item"><img src="http://placehold.it/100x150/333" /></li>
        <li class="item"><img src="http://placehold.it/100x150/122" /></li>
    </ul>
</div>

CSS

#wrapper {
    width: 100%;
    height: 170px;
    overflow: hidden;
    background-color: red;
}
#scroll-content {
    width: 1050px;
}


.item {
    float: left;
    margin-right: 5px;
    list-style-type: none;
}

JavaScript

$(document).ready(function() {

    var wrapper = $('#wrapper'),
        content = $('#scroll-content');

    wrapper.bind('mouseenter mousemove', $.throttle(200, mousemove));

    function mousemove(e) {
        var wrapper_width = wrapper.outerWidth(),
            content_width = content.outerWidth();
        //calculate new left margin
        var tmp = e.pageX * (content_width - wrapper_width) / wrapper_width;

        content.stop().animate({
            'margin-left': '-' + tmp + 'px'
        }, 'fast', 'easeOutSine');
    }
});