JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mask">
<ul class="imgHolder">
   <li>
      <img width="270" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/270px-The_Earth_seen_from_Apollo_17.jpg" />
   </li>
   <li>
      <img width="270" src="http://www.mallorcaweb.net/masm/Planetas/Jupiter.jpg" />
   </li>
    <li>
      <img width="270" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg" />
   </li>
   <li>
      <img width="270" src="http://static.ddmcdn.com/gif/sun-update-1.jpg" />
   </li>
   <li>
      <img width="270" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/240px-Neptune.jpg" />
   </li>
</ul>
</div>

<ul class="thumbHolder">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>
<span class="control Bleft">Prev</span>
<span class="control Bright">Right</span>

CSS

body { background-color:#000; position:relative; }
.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
ul.imgHolder { position:relative; top:0px;left:0px; width:1350px; }
                      /* this width must be total of the images */
  ul.imgHolder li { float:left; position:relative; top:0px;left:0px; }

ul.thumbHolder { position:absolute; top:310px; left:100px; }
    ul.thumbHolder li { 
        float:left; margin:0 5px; font: bold 16px arial; cursor:pointer;
        background-color:#ccc; color:#000; padding:10px;
    }ul.thumbHolder li.selected {background-color:#f00; color:#000;}


.control {position:absolute; top: 400px; color:#fff; cursor:pointer;}
.Bleft { left:150px; }
.Bright { left:200px; }

JavaScript

/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
 * Licensed under the MIT License (LICENSE.txt).
 * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 * Thanks to: Seamus Leahy for adding deltaX and deltaY
 * Version: 3.0.6
 * Requires: 1.2.2+
 */
(function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery)

$('.mask').bind('mousewheel', function(event, delta) {
    var dir = delta > 0 ? 'up' : 'down', 
    vel = Math.abs(delta);
	var cur = parseInt($('.imgHolder').css('left'));
    
    if( dir === 'up' && cur <= 0 ) {
        $('.imgHolder').css({'left':'+='+ vel*5 +'px'});
    }
    else if ( dir === 'down' && cur > -1100 ){
        $('.imgHolder').css({'left':'-='+ vel*5 +'px'});
    }
    
    return false;
});

//Custom slider:

var thumbs = $('ul.thumbHolder li');
var bigImgs = $('ul.imgHolder li');
var mask = $('.imgHolder');
var imgW = $('ul.imgHolder li').width();
var speed =...