<div class="slider">
  <div class="image" style="background: url('http://lorempixel.com/1920/200/abstract/') no-repeat center center;"></div>
  <div class="image" style="background: url('http://placekitten.com/2000/200/') no-repeat center center;"></div>
  <div class="image" style="background: url('http://placehold.it/1900x200') no-repeat center center;" class="active"></div>
  <div class="image" style="background: url('http://placekitten.com/2000/200/') no-repeat center center;"></div>
</div>

html, body {
  width: 100%;
  overflow-x: hidden;
  margin: 0;
}

.slider {
  height: 200px;
  width: 100%;
}

.image {
  width: 100%;
  height: 0;
  -webkit-background-size: cover;
  background-size: cover;
  //opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;

  &.active {
    //opacity: 1;
    height: 200px;
  }

}

var divs = $(".slider div");
var i = 0;

function iterate() {
  if ( i >= divs.length) {
    i = 0;
  }
  
  $(".image").removeClass( "active" );
  $(divs[i]).addClass( "active" );
  
  i++;
}

setInterval( iterate, 5000 );