JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<div id="outer_container">
<div id="thumbScroller">
    <div class="container">

        <div class="content">
                <img class='thumb' src="http://image8.memolane.com/resize/500x64/http://farm5.static.flickr.com/4078/4855965494_494fe101b7_m.jpg">
            </div>

            <div class="content">
                <img class='thumb' src="http://image8.memolane.com/resize/500x64/http://farm5.static.flickr.com/4073/4855347181_059796d867_m.jpg">
            </div>

            <div class="content">
                <img class='thumb' src="http://image8.memolane.com/resize/500x64/http://farm5.static.flickr.com/4080/4855347673_f8d9e24ff7_m.jpg">
            </div>

            <div class="content">
                <img class='thumb' src="http://image8.memolane.com/resize/500x64/http://farm5.static.flickr.com/4094/4855348141_ed4540d50b_m.jpg">
            </div>

            <div class="content">
                <img class='thumb' src="http://image8.memolane.com/resize/500x64/http://farm5.static.flickr.com/4139/4855348635_5819af03f6_m.jpg">
            </div>

            <div class="content">
                <img class='thumb' src="http://image8.memolane.com/resize/500x64/http://farm5.static.flickr.com/4116/4855349181_9aa70deab3_m.jpg">
            </div>

            <div class="content">
                <img class='thumb' src="http://image8.memolane.com/resize/500x64/http://farm5.static.flickr.com/4094/4855968578_4dcc6cc6bf_m.jpg">
            </div>

            <div class="content">
                <img class='thumb' src="http://image8.memolane.com/resize/500x64/http://farm5.static.flickr.com/4080/4855350307_627377407d_m.jpg">
            </div>

            <div class="content">
                <img class='thumb' src="http://image8.memolane.com/resize/500x64/http://farm5.static.flickr.com/4117/4855969670_48ee32e332_m.jpg">
            </div>

            <div class="content">
                <img class='thumb'...

CSS

#outer_container{margin:60px auto; width:500px;  background:#fff; border:1px solid #999;}
#thumbScroller{position:relative; margin:auto; width:500px; height: 78px; overflow: hidden;}
#thumbScroller .container {display:none;}
#thumbScroller .container{position:relative; left:0;}
#thumbScroller .content{float:left;border:5px solid #fff;}
#thumbScroller img{border:2px solid #fff;}
#loader {text-align: center;}

JavaScript

$.fn.imagesLoaded = function(callback){
  var elems = this.filter('img'),
      len = elems.length;
      
  elems.bind('load',function(){
      if (--len <= 0){ callback.call(elems,this); }
  }).each(function(){
     // cached images don't fire load sometimes, so we reset src.
     if (this.complete || this.complete === undefined){
        var src = this.src;
        // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
        // data uri bypasses webkit log warning (thx doug jones)
        this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
        this.src = src;
     }
  });

  return this;
};

$('img.thumb').imagesLoaded(function(){

    $thumbScroller=$("#thumbScroller");
    $thumbScroller_container=$("#thumbScroller .container");
    $thumbScroller_content=$("#thumbScroller .content");
    $thumbScroller_thumb=$("#thumbScroller .thumb");
    
    $('#loader').show();
    $thumbScroller_container.show();

    var sliderWidth=$thumbScroller.width();//with of viewport 
    
    var totalContent = 0;

    $thumbScroller_content.each(function (i,el) {
        totalContent+=$(el).outerWidth();
    });    
    
    $thumbScroller_container.css("width",totalContent);

    $thumbScroller.mousemove(function(e){
        var mouseCoords=(e.pageX - this.offsetLeft);
          var mousePercentx=mouseCoords/sliderWidth;

          var destx=-(((totalContent-sliderWidth)-sliderWidth)*(mousePercentx));

          var thePosA=mouseCoords-destx;
          var thePosB=destx-mouseCoords;
          

          if(mouseCoords==destx){
            $thumbScroller_container.stop();
          }
          if(mouseCoords>destx){
            $thumbScroller_container.css("left",-thePosA);
          }
          if(mouseCoords<destx){
            $thumbScroller_container.css("left",thePosB);
          }
          
    });


    $thumbScroller_thumb.hover(
        function(){ //mouse over
           ...