JSFiddle - React, Tailwind, and code Playground
HTML
<div id="sg-container" >
<div id="sg-scroll">
<div class="sg-pic_wrap"><img onLoad="fadeIn(this)" src="http://www.bestmotherofthegroomspeeches.com/wp-content/themes/thesis/rotator/sample-1.jpg" class="sg-pic"></div>
<div class="sg-pic_wrap"><img onLoad="fadeIn(this)" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" class="sg-pic"></div>
<div class="sg-pic_wrap"><img onLoad="fadeIn(this)" src="http://petapixel.com/assets/uploads/2012/02/sample1_mini.jpg" class="sg-pic"></div>
<div class="sg-pic_wrap"><img onLoad="fadeIn(this)" src="http://www.nasa.gov/images/content/609274main_harpoon_sample_example_lgweb.jpg" class="sg-pic" ></div>
<div class="sg-pic_wrap"><img onLoad="fadeIn(this)" src="https://pixabay.com/static/uploads/photo/2015/06/19/17/58/sample-815141_960_720.jpg" class="sg-pic"></div>
<div class="sg-pic_wrap"><img onLoad="fadeIn(this)" src="http://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/12/2015/06/Leica-Q-sample-image-1-630x420.jpg" class="sg-pic"></div>
</div>
</div>
CSS
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color:#121212;
}
#sg-container{
margin:0px;
width:100%;
left:0;
top:0;
bottom:50px;
position:fixed;
overflow-x:auto;
overflow-y:hidden;
}
#sg-scroll{
height:100%;
width:100%;
overflow:auto;
white-space:nowrap;
font-size:0;
}
.sg-pic_wrap{
height:98%;
width:auto;
white-space:nowrap;
display:inline-block;
padding:0;
margin:0;
}
.sg-pic{
height:100%;
width:auto;
padding:0px;
margin:0px;
}
::-webkit-scrollbar { width: 10px; height:10px; cursor:pointer; }
::-webkit-scrollbar-track { background:#bbb; -webkit-border-radius: 0px; border-radius: 0px; }
::-webkit-scrollbar-thumb { -webkit-border-radius: 0px; border-radius: 0px; background: green; }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,255,255,0.2); }