JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div id="controlpanel">
    <div id="controls">
        <button id="start" title="Start Slideshow"><i class="fa fa-play"></i>
        </button>
        <button id="stop" title="Pause Slideshow"><i class="fa fa-pause"></i>
        </button>
        <button id="prev" title="Previous Slide"><i class="fa fa-step-backward"></i>
        </button>
        <button id="next" title="Next Slide"><i class="fa fa-step-forward"></i>
        </button>
        <button id="start500ms" title="Start Slideshow (500ms between slides)">0.5s <i class="fa fa-play"></i>
        </button>
        <button id="start1s" title="Start Slideshow (1s between slides)">1s <i class="fa fa-play"></i>
        </button>
        <button id="start5s" title="Start Slideshow (5s between slides)">5s <i class="fa fa-play"></i>
        </button>
        <button id="start10s" title="Start Slideshow (10s between slides)">10s <i class="fa fa-play"></i>
        </button>
    </div>
</div>
<div class="fadein">
    <img src="http://www.betterphoto.com/uploads/processed/0715/0704092214421_users_dougjohnson_desktop_tre.jpg" />
    <img src="http://www.betterphoto.com/uploads/processed/0715/0704092214341_users_dougjohnson_desktop_tan.jpg" />
    <img src="http://www.betterphoto.com/uploads/processed/0715/0704092214161_users_dougjohnson_desktop_ssk.jpg" />
</div>

CSS

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background:#000;
    overflow:hidden;
}
.fadein {
    height:98%;
    width:auto;
    text-align:center;
}
.fadein img {
    height:98%;
}
#controlpanel {
    background: rbga(200, 200, 200, 0.3);
    top:0;
    position:fixed;
    z-index:10001;
    width:100%;
    margin:0 auto;
    z-index:10000;
    text-align:center;
    height:35px;
}
#controls {
    display:block;
    top:10px;
    width:750px;
    margin:0 auto;
    position:relative;
    left:50%;
    margin-left:-375px;
    z-index:10001;
    text-align:center;
}
button {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -khtml-border-radius: 10px;
}

JavaScript

var myTimer;
  var playSpeed;
  var fadeControls;

  function start() {
      $('.fadein img:gt(0)').hide();
      playSpeed = 3500;
      myTimer = setInterval(function () {
          $('.fadein :first-child')
              .fadeOut()
              .next('img')
              .fadeIn()
              .end()
              .appendTo('.fadein');
      }, playSpeed);
  }

  function startSS(playSpeed) {
      $('.fadein img:gt(0)').hide();
      myTimer = setInterval(function () {
          $('.fadein :first-child')
              .fadeOut()
              .next('img')
              .fadeIn()
              .end()
              .appendTo('.fadein');
      }, playSpeed);
  }

  function stop() {
      $('.fadein img:gt(0)').hide();
      clearInterval(myTimer);
  }

  function getNext() {
      $('.fadein img:gt(0)').hide();
      clearInterval(myTimer);
      $('.fadein :first-child')
          .fadeOut()
          .next('img')
          .fadeIn()
          .end()
          .appendTo('.fadein');
  }

  function getPrev() {
      $('.fadein img:gt(0)').hide();
      clearInterval(myTimer);
      $('.fadein img:gt(0)').hide();
      clearInterval(myTimer);

      $('.fadein :last-child')
          .prependTo('.fadein')
          .show()
          .next('img')
          .hide()
          .end();
  }
  $(function () {
      $('.fadein img:gt(0)').hide();
      start(2500);
      $("#controlpanel").hover(

      function () {
          $("#controls").fadeIn();
      }, function () {
          $("#controls").fadeOut();
          $("#controlpanel").show();
      });
      $('#controls').delay(5000).fadeOut(2500);
      $('#start').on('click', start);
      $('#stop').on('click', stop);
      $('#next').on('click', getNext);
      $('#prev').on('click', getPrev);
      $('#start500ms').click(function () {
          startSS(500);
      });
      $('#start1s').click(function () {
          startSS(1000);
      });
      $('#start5s').click(function () {
          startSS(5000);
  ...