handrolled-carousel.html

<div class="screenshots">
  <button class="prev">
    <i class="fa fa-chevron-left"></i>
  </button>
  <div class="monitor">
    <img src="/images/monitor.png">
  </div>
  <div class="images">
  	<a href="/images/portfolio/2016-1-30-oshab/1.jpg" target="_blank" style="margin-left: -201.9%;">
  		<img src="/images/portfolio/2016-1-30-oshab/1.jpg">
  	</a>
  	<a href="/images/portfolio/2016-1-30-oshab/2.jpg" target="_blank">
  		<img src="/images/portfolio/2016-1-30-oshab/2.jpg">
  	</a>
    <a href="/images/portfolio/2016-1-30-oshab/3.jpg" target="_blank">
      <img src="/images/portfolio/2016-1-30-oshab/3.jpg">
    </a>
    <a href="/images/portfolio/2016-1-30-oshab/4.jpg" target="_blank">
      <img src="/images/portfolio/2016-1-30-oshab/4.jpg">
    </a>
  </div>
  <button class="next">
    <i class="fa fa-chevron-right"></i>
  </button>
  <script>
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var first = document.querySelector('.screenshots a:first-of-type');
    var count = document.querySelectorAll('.screenshots a').length;
    var current = 0;
    var timeout;

    prev.addEventListener('click', function() {
      current = (count + current - 1) % count;
      first.style.marginLeft = (-100 * current - 1.9) + '%';
      clearTimeout(timeout);
      timeout = setTimeout(function() { next.click(); }, 10000);
    });

    next.addEventListener('click', function() {
      current = (count + current + 1) % count;
      first.style.marginLeft = (-100 * current - 1.9) + '%';
      clearTimeout(timeout);
      timeout = setTimeout(function() { next.click(); }, 5000);
    });

    timeout = setTimeout(function() { next.click(); }, 5000);

  </script>
</div>