JSFiddle - React, Tailwind, and code Playground

by Tyler N.

HTML

<ul class="fadein">
    <li class="one">
      <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
    </li>
    <li class="two">
      <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
    </li>
    <li class="three">
      <img class="last" src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
    </li>
    <li> DONE!! </li>
  </ul>

CSS

.fadein {
  position:relative;
  width:400px;
}

.fadein li {
  position:absolute;
  left:0;
  top:0;
}

.fadein li img {
  display: block;
  width: 400px;
}

JavaScript

$(function() {

  var sliderTime = 2000; //How long each slide shows
  var totalTime = $('.fadein li').length * sliderTime;

  // slider fade in and out animation
  $('.fadein li:gt(0)').hide();

  var myInterval = setInterval(function(){
    $('.fadein li:first-child').fadeOut(2000)
       .next('li').fadeIn(2000)
       .end().appendTo('.fadein');
    }, sliderTime);

  // stop interval when the last slide is showing
  setTimeout(function() {
    clearInterval(myInterval);
  }, totalTime);

});