Simplest slideshow

by 2jddfsjad

HTML

<div class="slideshow">
    <div class="cell">
    <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+01" width="360" height="300"/>
    </div>

    <div class="cell">
    <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+02" width="360" height="300" />
    </div>

    <div class="cell">
    <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+03" width="360" height="300" />
    </div>
</div>

CSS

.slideshow {
  overflow: hidden;
  width: 360px;
  height: 300px;
  background-color:white;
  margin: 10px;
}

.slideshow .cell {
  display: block;
  width: 400px;
  height: 260px;
  overflow: hidden;
}

JavaScript

var count = 1;
setInterval(function() {
  count = $(".slideshow").find(".cell:nth-child(" + count + ")").fadeOut().next().length ? count + 1 : 1;
  $(".slideshow").find(".cell:nth-child(" + count + ")").fadeIn();
}, 2000);