Slider

by Lazaro Contreras

HTML

<slider width="550px" height="250px" sec="2">
  <img src="http://lorempixel.com/550/250/technics/1/" />
  <img src="http://lorempixel.com/550/250/technics/2/" />
  <img src="http://lorempixel.com/550/250/technics/3/" />
  <img src="http://lorempixel.com/550/250/technics/4/" />
  <img src="http://lorempixel.com/550/250/technics/5/" />
  <img src="http://lorempixel.com/550/250/technics/6/" />
  <img src="http://lorempixel.com/550/250/technics/7/" />
</slider>

CSS

slider {
  position: relative;
  display: none;
  overflow: hidden;
}

slider img {
  position: relative;
  display: inline;
  padding: 0;
  marging: 0;
  float: left;
}

JavaScript

var slider = document.querySelector('slider');

slider.style.width = slider.getAttribute('width');
slider.style.height = slider.getAttribute('height');
slider.style.display = 'inline-block';

setInterval(function() {
  if (slider.scrollTop >= (slider.scrollHeight - 300)) {
    slider.scrollTop = '0';
  } else {
    slider.scrollTop += parseInt(slider.getAttribute('height').replace('px', ''));
    console.log(slider.scrollTop);
  }
}, (slider.getAttribute('sec') * 1000), slider);