Edit in JSFiddle

/*
 * TODO: check if reusing item is in the visible viewport
 */
var Carousel = function(){
	this.carousel = document.querySelector('.carousel');
  this.container = this.carousel.querySelector('.container');
  this.itemElements = this.container.querySelectorAll('.item');
  
  this.init();
}

Carousel.prototype.init = function(){
	this.DIRECTION_LEFT = -1;
  this.DIRECTION_RIGHT = 1;
	this.activeIndex = 0;
  this.amountItems = this.itemElements.length;
  this.container.style.width = this.amountItems * 300 + 'px';
  
  document.querySelector('#left').addEventListener('click', this.scroll.bind(this, this.DIRECTION_LEFT));
  document.querySelector('#right').addEventListener('click', this.scroll.bind(this, this.DIRECTION_RIGHT));
}

Carousel.prototype.scroll = function(direction){
	if(
  	(direction === this.DIRECTION_LEFT && this.activeIndex === 0)
    || (direction === this.DIRECTION_RIGHT && this.activeIndex === this.amountItems-1)
  ) {
  	this.infiniteLoop(direction)
  } else {
  	this.activeIndex += direction;
  }
 
  this.adjustOffset(direction);
}

Carousel.prototype.infiniteLoop = function(direction){
	if (direction === this.DIRECTION_LEFT) {
  	this.reuseLastItem();
  } else if (direction === this.DIRECTION_RIGHT) {
  	this.reuseFirstItem();
  }
  
  this.refreshItemElements();
}

Carousel.prototype.adjustOffset = function(direction) {
	this.container.style.left = parseInt(this.container.style.left || 0, 10) - 300 * direction + 'px';
}

Carousel.prototype.reuseLastItem = function(){
	var lastElement = this.itemElements[this.itemElements.length-1];
  var firstElement = this.itemElements[0];
  this.container.insertBefore(lastElement, firstElement);
  this.container.style.marginLeft =  parseInt(this.container.style.marginLeft || 0, 10) - 300 + 'px';
}

Carousel.prototype.reuseFirstItem = function(){
	var firstElement = this.itemElements[0];
  this.container.appendChild(firstElement);
  this.container.style.marginLeft = parseInt(this.container.style.marginLeft || 0, 10) + 300 + 'px';
}

Carousel.prototype.refreshItemElements = function(){
	this.itemElements = this.container.querySelectorAll('.item');
}

new Carousel();	
<div class="carousel">
  <div class="container">
    <div class="item">
      Slide 1
    </div>
    <div class="item">
      Slide 2
    </div>
    <div class="item">
      Slide 3
    </div>
  </div>
</div>

<span id="left">
Left
</span>
<span id="right">
Right
</span>
* {
  padding: 0;
  margin: 0;
}

.carousel {
  width:300px;
  height:100px;
  background:yellow;
  overflow: hidden;
  position: relative;
}
.offsetElement {
  position: absolute;
  top: 0; left:0;
}
.container {
  width:600px; 
  position: absolute;
  left: 0;
  transition: left 1s
}
.container:after{
  content:'';
  display: block;
  clear:left;
}
.container.animatable {
  transition: left 1s;
}
.item {
  width:300px;
  height:100px;
  background:pink;
  float:left;
  font-size: 40px;
  text-align: center;
}