JQuery Thumbnail Scroller without Plugin

http://www.dte.web.id/2012/09/thumbnail-scroller.html

by Taufik Nurrohman

HTML

<div class="t-s">
    <div class="t-c">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</div>
<div class="t-s">
    <div class="t-c">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</div>
<div class="t-s">
    <div class="t-c">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</div>

CSS

body {
    background-color:white;
    padding:50px 50px 60px;
    margin:0 0;
}
.t-s {
    border:1px solid black;
    height:50px;
    margin:10px 10px 0;
    overflow:auto;
}
.t-c {
    overflow:hidden;
    height:40px;
    margin:5px 0 0 0;
    position:relative;
}
.t-c p {
    margin:0 0;
    padding:0 0;
    width:50px;
    height:40px;
    background-color:#bbb;
    float:left;
    margin-left:5px;
}

JavaScript

(function ($) {

    var config = {
        itemMargins: 5 // Distance between the thumbnails
    };
    $('.t-s').each(function () {
        var $thumbnailScroller = $(this),
            $container = $thumbnailScroller.find('.t-c'),
            $item = $container.find('p'),
            item_length = $item.length,
            item_width = $item.outerWidth(),
            item_margin = config.itemMargins,
            total_width = (item_width + item_margin) * item_length,
            $window = $(window);

        $thumbnailScroller.css('overflow', 'hidden');
        $container.css('width', total_width);

        $window.on("resize", function () {
            var o_l = $thumbnailScroller.offset().left,
                t_w = $thumbnailScroller.width(),
                c_w = total_width;
            $thumbnailScroller.on("mousemove", function (e) {
                if ($(this).width() < $container.width()) {
                    $container.css('left', -((e.pageX - o_l) * (c_w - t_w) / t_w));
                }
            });
        }).trigger("resize");
    });

})(jQuery);