A CodePen by Daniel Marino. Non jQuery slideshow - An easy way to use CSS transitions and simple JS to do a slideshow without loading jQuery, saving you a bunch of bytes :)

index.html

  <div class="slides">
    <div style="background-color:red;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:yellow;"></div>
    <div style="background-color:green;"></div>
    <div style="background-color:purple;"></div>
  </div>

script.js

(function slideShow() {
  var slides = document.querySelectorAll('.slides > *');
  var length = slides.length; // Number of slides
  var int    = 2              // Number of seconds between slide transition
  var num    = 1;
  var prev, next;
  
  setInterval(function(){
  
    // Easy way to remove all instances of .slide-out & .slide-in
    for (var x = 0; x < length; x +=1 ) {
      slides[x].className = '';
    }
  
    // If count is less than number of slides, increase counter by 1
    if (num < length) {
      prev = num - 1;
      next = num;
      num += 1;
    // If count is equal/greater than number of slides, reset counter
    } else {
      prev = num - 1;
      next = 0;
      num  = 1;
    }
  
    // Set the previous slide to .slide-out
    slides[prev].className = 'slide-out';
  
    // Set the next slide to .slide-in
    slides[next].className = 'slide-in';
  
  }, int * 1000);
  
  // Start the slideshow
  slides[0].className = 'slide-in';
}());

style.scss

@import "compass";
$height: 200px;
$width:  300px;

.slides {
  height: $height;
  overflow: hidden;
  position: relative;
  width: $width;
  
  > * {
    background-size: 100%;
    height: $height;
    left: $width;
    position: absolute;
    top: 0;
    @include transition(left .5s ease);
    width: $width;
    z-index: 1;

    &.slide-in {
      left: 0;
      z-index: 3;
    }

    &.slide-out {
      left: -$width;
      z-index: 2;
    }
  }
}