JSFiddle - React, Tailwind, and code Playground
by Superman
HTML
<DIV class="panelFader" id="vehicleGallery">
<DIV class="wrapper" id="listofimgs" style="overflow-x: hidden; overflow-y: hidden; ">
<a href="images2/bigimg1.jpg"> <img id="img1" src="http://farm1.static.flickr.com/39/85402955_bab43a4623.jpg"></a>
<a href="images2/bigimg2.jpg"> <img id="img2" src="http://farm1.static.flickr.com/39/85391998_c0727a1f9e.jpg"></a>
<a href="images2/bigimg3.jpg"> <img id="img3" src="http://farm1.static.flickr.com/39/84731233_105378632b.jpg"></a>
<a href="images2/bigimg4.jpg"> <img id="img4" src="http://farm1.static.flickr.com/6/85364647_587e2ac1dc.jpg"></a>
<a href="images2/bigimg1.jpg"> <img id="img1" src="http://farm1.static.flickr.com/39/85402955_bab43a4623.jpg"></a>
<a href="images2/bigimg2.jpg"> <img id="img2" src="http://farm1.static.flickr.com/39/85391998_c0727a1f9e.jpg"></a>
<a href="images2/bigimg3.jpg"> <img id="img3" src="http://farm1.static.flickr.com/39/84731233_105378632b.jpg"></a>
<a href="images2/bigimg4.jpg"> <img id="img4" src="http://farm1.static.flickr.com/6/85364647_587e2ac1dc.jpg"></a>
</DIV>
<!--class="arrow forward"-->
<DIV id="thumbNav" >
<a href="#" class="thumb"><img src="http://farm1.static.flickr.com/39/85402955_bab43a4623_s.jpg"></a>
<a href="#" class="thumb"><img src="http://farm1.static.flickr.com/39/85391998_c0727a1f9e.jpg"></a>
<a href="#" class="thumb"><img src="http://farm1.static.flickr.com/39/84731233_105378632b.jpg"></a>
<a href="#" class="thumb"><img src="http://farm1.static.flickr.com/6/85364647_587e2ac1dc.jpg"></a>
<a href="#" class="thumb"><img src="http://farm1.static.flickr.com/39/85402955_bab43a4623_s.jpg"></a>
<a href="#" class="thumb"><img src="http://farm1.static.flickr.com/39/85391998_c0727a1f9e.jpg"></a>
<a href="#" class="thumb"><img src="http://farm1.static.flickr.com/39/84731233_105378632b.jpg"></a>
<a href="#" class="thumb"><img...CSS
/* Panel Fader */
.panelFader { height: 320px; width: 786px; position: relative; margin: 0px 0px 10px 0px; z-index: 10; background: #fff; overflow: hidden; }
.panelFader h3 { font-weight: bold; color: #fefefe; font-size: 110%; padding: 7px; }
.panelFader .wrapper { width: 786px; height: 320px; overflow-x: hidden; overflow-y: visible; margin: 0; position: absolute; top: 0; left: 0; }
.panelFader .wrapper ul { width: 9999px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; }
.panelFader ul li { display: block; float: left; padding: 20px; height: 280px; width: 766px; margin: 0; position: relative; }
.panelFader .arrow { display: none; }
.panelFader #thumbNav { height: 30px; position: absolute; bottom: 0px; left: 0px; z-index: 2; background: #3a3a3a; width: 786px; }
.panelFader #thumbNav a { text-align: center; width: 157px; float: left; display: block; color: #fefefe; text-decoration: none; font-weight: bold; line-height: 30px; }
.panelFader #thumbNav a img { display: none; }
.panelFader #thumbNav a:hover { background: #555; }
.panelFader #thumbNav a.cur { background: #2e513b; color: #fff; }
.panelFader #start-stop { display: none; }
.panelFader .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.panelFader .wrapper ul ul li { float: none; height: auto; width: auto; background: none; }
.panelFader .wrapper ul li img { position: absolute; top: 0px; left: 0px; z-index: 0; }
.panelFader .tintBox { }
.panelFader .tintBox h2 { position: absolute; z-index: 2; font-size: 220%; font-weight: normal; color: #fefefe; font-family: Calibri,Arial,Helvetica,sans-serif; }
.panelFader .tintBox p {...JavaScript
//my first gallery plugin after @mekwall fixing in thumb scroller
var hideall = $('#listofimgs a').children(":not('#img1')").hide();
var btns = $('#thumbNav a');
$(btns).mouseover(function() {
var ndx = $("#thumbNav a ").index($(this));
var imgs = $("#listofimgs img");
imgs.not(imgs.eq(ndx).show()).hide();
});
var $thumbNav = $('#thumbNav'),
totalThumbHeight = $thumbNav[0].scrollHeight - $thumbNav.height();
$("#up").mouseover(function() {
$("#thumbNav").animate({
top: (totalThumbHeight * -1)
}, {
duration: 3000,
easing: "swing"
});
}).mouseout(function() {
$("#thumbNav").stop();
});
$("#down").mouseover(function() {
$("#thumbNav").animate({
top: "-0.5px"
}, {
duration: 3000,
easing: "swing"
});
}).mouseout(function() {
$("#thumbNav").stop();
});
$("#listofimgs a").lightBox();