<div class="container">
  <div class="item">
    <h1>1</h1>
  </div>
  <div class="item">
    <h1>2</h1>
  </div>
  <div class="item">
    <h1>3</h1>
  </div>
</div>

.container{
  width: 100%;
  overflow: hidden;
  position: relative;
}
.item {
  border: 1px solid #ccc;
  position: absolute;
  right: -100%;
  transition: all 600ms ease-in;
  text-align: center;
  opacity: 0;
}
.active {      
  position: relative;
  right: 0;
  background: #4099ff;
  color: #fff;
  opacity: 1;
}

var sliderItem = Array.from(document.getElementsByClassName('item'));
var i = 0;
sliderItem[0].classList.add('active') //Set the first image

function slider() {
    i++
    if(i > 2) { //keep the cycle going
      i = 0
    }
    sliderItem.forEach(function(item) { //clear active from all images
      item.classList.remove('active')
    })
    sliderItem[i].classList.add('active') //add active back to the current image

  setTimeout(slider, 3000) 
    }
// Change background every 3 seconds
setTimeout(slider, 3000)