JSFiddle - React, Tailwind, and code Playground

by hakarune

HTML

<div id="wrapper">
     <div id="sliderWhole">
         <div id="slideShow">
             <div class="slideContainer show">
                    <img src="http://1.bp.blogspot.com/-t_vwSnHpo_4/UOXD_j44m4I/AAAAAAAAX90/DQbTW95McTs/s1600/fracking+from+space.jpg" />
                </div>
                 <div class="slideContainer">
                    <img src="http://www.wallpapersdesign.net/wallpapers/2013/07/Space-Earth-Moon-Stars-And-Nebula-Glow-768x1024.jpg" />
                 </div>
                <div class="slideContainer">
                    <img src="http://dealbreaker.com/uploads/2013/07/Galaxia-y-Espacio-Exterior.jpg" />
                </div>
         </div>
     </div>
</div>

CSS

body {width:100%; height:100%; margin: 0; padding: 0; background:#222}

#wrapper{ 
    width:80%;
    margin: 50px auto;
    background:#666; 
    -webkit-box-shadow: inset 0px 0px 10px 5px rgba(33, 33, 33, .8);
    box-shadow: inset 0px 0px 10px 5px rgba(33, 33, 33, .8);
}

.slideContainer img { width:100%; height:100%;}

#sliderWhole {
    overflow: hidden;
    width: 400px;
    height: 300px;
    margin:0 auto;
}

#slideContainer {position:absolute;}

JavaScript

$(document).ready(function() {
 ////Slider////
 slideShow();
});

function slideShow() {
  var current = $('#slideShow div.show');
  var next = current.next().length ? current.next() : current.siblings().first();

  current.fadeOut('slow').removeClass('show');
  next.fadeIn('slow').addClass('show');
  
  setTimeout(slideShow, 3000);
}