<h2>Pure JavaScript Slider.</h2>
<h5>No jQuery was harmed!</h5>

<div class="slider__container">
<div class="slider" data-js="sslide">
  <img src="http://cdn.eyeem.com/thumb/h/800/eaa71c732cbee5701edb4e0e937feb3222ed4a20-1386257098" />
  <img src="http://cdn.eyeem.com/thumb/h/800/28b3b67fe9d1015a9738b3be7a8a7ae8f4a60421-1392731499"/>
  <img src="http://cdn.eyeem.com/thumb/h/800/3343d0501110d31ec2e424ebcf92106c7195587d-1389594002" />
  <img src="http://cdn.eyeem.com/thumb/h/800/b93b2e1e77cd05a6ec4139f5e31b9c8809223654-1385122399" />
  <img src="http://cdn.eyeem.com/thumb/h/800/5cacad00f9fb6574a1b58d76f55f87b0d972203e-1385563404" />  <img src="http://cdn.eyeem.com/thumb/h/800/d3ee24ea591d90f690c3f2819878097cff8272f9-1384525350" />
  <img src="http://cdn.eyeem.com/thumb/h/800/e3b6546ac1dfa8b261da5c3dbb40449d6edef0bb-1381759073" />
  <img src="http://cdn.eyeem.com/thumb/h/800/7102e8edb21b3e5a31f8f9067d6b024c58c38137-1381507137" />
  <img src="http://cdn.eyeem.com/thumb/h/800/60e487d3a8683c8d83c75e8790f25cd822bb70ad-1381150604" />
  <img src="http://cdn.eyeem.com/thumb/h/800/bce02b5cec78a8fd45772530775ecc5fe610524a-1379255277"  />
  <img src="http://cdn.eyeem.com/thumb/h/800/506905a65fa0d57d71a0bf90c1741cb9120bf0c3-1378290101"  />
  <img src="http://cdn.eyeem.com/thumb/h/800/4c60d57c4d80c9d9a26bcd8882c6d4a1e7fa0b9a-1374858049"  />
</div>
</div>

@import "compass/css3";

* {
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
}

body {
  font: 1rem/1.3 Arial, Helvetica, sans-serif;
}

h2, h5 {
  text-align: center;
}

h5 {
  text-transform: uppercase;
  color: #aeaeae;
}

.slider__container {
  width: 40em;
  height: 25em;
  margin: 1.5em auto;
  overflow: hidden;
}
.slider {
    img {
      float: left;
    }
}

document.addEventListener('DOMContentLoaded', function() {
  // sslider = Simple SLIDER
  function sslider() {
    
    var current = 0,
        i,
        slider = document.querySelector('[data-js="sslide"]'),
        allImages =  slider.querySelectorAll('img'),
        imgWidth = Math.ceil(100 / allImages.length),
        sliderWidth = allImages.length * 100;
    
    slider.style.width = sliderWidth + '%';
    
    for(i = 0; i <= allImages.length - 1; i++) {
       allImages[i].style.width = imgWidth + '%';
    }

  function animateRight(cur) {
      var i = imgWidth,
          time = 50;
      var animate = setInterval(function() {
      if(i <= sliderWidth) {
        allImages[cur].style.marginLeft = "-" + i + "%";
        i--;
      } else {
        clearInterval(animate);
      }
      }, time);  
   } 
    
    function reset() {
      for(i = 0; i <= allImages.length - 1; i++) {
        animateRight(i);
      }
      // resseting the current image to the first image
      current = 0;
    }    
    
    function animateLeft(cur) {
      var i = 0,
          time = 50;
      var animate = setInterval(function() {
      if(i <= imgWidth) {
        allImages[cur].style.marginLeft = "-" + i  + "%";
        i++;
      } else {
        clearInterval(animate);
      }
      }, time);  
   }
    
    setInterval(function () {
      if(current <= allImages.length - 2) {
        animateLeft(current);
        current++;
        
      } else {
        reset();
      }
    }, 3000);
} // end
 sslider();
});