A Pen by Justin Perry.

index.html

<div id="slideshow">
  <img class="is-active" src="http://placekitten.com/300/296" alt="" />
  <img src="http://placekitten.com/300/297" alt="" />
  <img src="http://placekitten.com/300/302" alt="" />
  <img src="http://placekitten.com/300/299" alt="" />
  <img src="http://placekitten.com/300/301" alt="" />
</div>

script.js

(function(){

  var slideshow = document.getElementById('slideshow'),
      imgs = slideshow.getElementsByTagName('img'),
      activeClass = 'is-active',
      activeClassRegEx = new RegExp( '\\b'+ activeClass + '\\b', 'i' ),
      count = 0,
      timer,
      previous;

  function next(){
    previous = count > 0 ? count - 1 : 0;  
    imgs[ previous ].className = imgs[ previous ].className.replace( activeClassRegEx, '' );
    
    if( count < imgs.length ){
      imgs[ count ].className += activeClass;
      count++;
    }  
    else{
      count = 0;
      next();
    }
  }

  next();

  timer = setInterval(function(){
    next();
  }, 2000);

})();

style.css

*{
  box-sizing: border-box;
}
body{ 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313));
}
#slideshow{
  height: 800px;
  margin: auto;
  max-width: 500px;
  position: relative;
}

#slideshow img{
  border-radius: 40px;
  border: 20px solid #222;
  height: auto;
  opacity: 0;
  left: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  -webkit-transition: 1s all;
  -webkit-transform: scale(1);
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
}

#slideshow .is-active{
  opacity: 1;
  left: 0;
  top: 0;
  z-index: 2;
  -webkit-transition: 1s all;
  -webkit-transform: scale(.8);
  -webkit-backface-visibility: hidden;
}

Vanilla-JS---CSS3-image-carousel.markdown

Vanilla JS / CSS3 image carousel

Vanilla JS image slideshow with CSS3 transition

A Pen by Justin Perry on CodePen.

License.