bpierre/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mini slider</title>
  <link rel="stylesheet" href="mini-slider.css">
</head>
<body>
  <div id="slider">
    <!-- The previous button is inserted here -->
    <div> <!-- The container -->
      <ul> <!-- The sliding element -->
        <li>#1</li>
        <li>#2</li>
        <li>#3</li>
        <li>#4</li>
        <li>#5</li>
        <li>#6</li>
        <li>#7</li>
        <li>#8</li>
        <li>#9</li>
        <li>#10</li>
        <li>#11</li>
        <li>#12</li>
      </ul>
    </div>
    <!-- The next button is inserted here -->
  </div>
  <script src="mini-slider.js"></script>
  <script>
    var sliderElement = document.querySelector('#slider div'),
        sliderItems = sliderElement.querySelectorAll('li');
    MiniSlider.init(sliderElement, sliderItems, {eltCount: 3});
  </script>
</body>
</html>

## mini-slider.css
#slider {
  width: 950px;
  margin: 100px auto;
}
#slider button {
  float: left;
  width: 100px;
  height: 200px;
  font-size: 16px;
  cursor: pointer;
}
#slider button[disabled] {
  cursor: default;
}
#slider div {
  float: left;
  overflow: hidden;
  width: 750px;
  height: 200px;
}
#slider ul {
  position: relative;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-transition: 300ms ease left;
  -moz-transition:    300ms ease left;
  -o-transition:      300ms ease left;
  -ms-transition:     300ms ease left;
  transition:         300ms ease left;
}
#slider li {
  float: left;
  width: 250px;
  font: 20px/200px sans-serif;
  text-align: center;
  color: #fff;
  background: #000;
}
#slider li:nth-child(even) {
  background: #f00;
}

## mini-slider.js
(function(window) {

  var MiniSlider,
      document = window.document;

  // IE8
  function eltChild(elt) {
    var child;
    if (!(child = elt.firstElementChild)) {
      child = elt.children[0];
      while (child.nodeType !== 1) {
        child = child.nextSibling;
      }
    }
    return child;
  }

  MiniSlider = function(container, elements, params) {
    var self = this,
        containerWidth = 0;

    self.eltCount = params.eltCount || 6;
    self.container = container;
    self.elements = elements;
    self.steps = self.elements.length;
    self.left = self.insertButton('before', 'Previous', 'prev');
    self.right = self.insertButton('after', 'Next', 'next');
    self.step = 0;

    for (var i = 0; i < self.elements.length; ++i) {
      var elt = self.elements[i];
      containerWidth += elt.offsetWidth + (parseInt(elt.style.marginLeft, 10) || 0);
    }

    eltChild(self.container).style.width = containerWidth + 'px';
    self.left.onclick = function(){ self.move.call(self, 'left'); };
    self.right.onclick = function(){ self.move.call(self, 'right'); };
    self.updateButtons();
  };

  MiniSlider.prototype.updateButtons = function() {
    this.left.disabled = this.step < 1;
    this.right.disabled = this.step + this.eltCount >= this.steps;
  };

  MiniSlider.prototype.insertButton = function(position, label, id) {
    var button = document.createElement('button');
    button.className = 'slider-btn ' + id;
    button.innerHTML = label;
    if (position === 'before') {
      this.container.parentNode.insertBefore(button, this.container);
    } else {
      this.container.parentNode.appendChild(button);
    }
    return button;
  };

  MiniSlider.prototype.move = function(direction) {
    var stepElt, leftPos = 0, parentRect, rect;
    if (direction === 'left' && this.step > 0) {
      this.step -= (this.eltCount);
    } else if (direction === 'right' && this.step < this.steps) {
      this.step += (this.eltCount);
    }

    stepElt = this.elements.item(this.step);
    parentRect = stepElt.parentNode.getBoundingClientRect();
    rect = stepElt.getBoundingClientRect();
    if (stepElt) {
      leftPos = -(rect.left - parentRect.left) - (parseInt(stepElt.style.marginLeft, 10) || 0);
      eltChild(this.container).style.left = leftPos + 'px';
    }
    this.updateButtons();
  };

  MiniSlider.init = function(container, elements, params) {
    var slider = new MiniSlider(container, elements, params);
    if (slider.container.length) {
      return slider;
    }
  };

  window.MiniSlider = MiniSlider;

}(this));
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Mini slider</title>
	<link rel="stylesheet" href="mini-slider.css">
	</head>
	<body>
	<div id="slider">
	<!-- The previous button is inserted here -->
	<div> <!-- The container -->
	<ul> <!-- The sliding element -->
	<li>#1</li>
	<li>#2</li>
	<li>#3</li>
	<li>#4</li>
	<li>#5</li>
	<li>#6</li>
	<li>#7</li>
	<li>#8</li>
	<li>#9</li>
	<li>#10</li>
	<li>#11</li>
	<li>#12</li>
	</ul>
	</div>
	<!-- The next button is inserted here -->
	</div>
	<script src="mini-slider.js"></script>
	<script>
	var sliderElement = document.querySelector('#slider div'),
	sliderItems = sliderElement.querySelectorAll('li');
	MiniSlider.init(sliderElement, sliderItems, {eltCount: 3});
	</script>
	</body>
	</html>
	#slider {
	width: 950px;
	margin: 100px auto;
	}
	#slider button {
	float: left;
	width: 100px;
	height: 200px;
	font-size: 16px;
	cursor: pointer;
	}
	#slider button[disabled] {
	cursor: default;
	}
	#slider div {
	float: left;
	overflow: hidden;
	width: 750px;
	height: 200px;
	}
	#slider ul {
	position: relative;
	left: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	-webkit-transition: 300ms ease left;
	-moz-transition: 300ms ease left;
	-o-transition: 300ms ease left;
	-ms-transition: 300ms ease left;
	transition: 300ms ease left;
	}
	#slider li {
	float: left;
	width: 250px;
	font: 20px/200px sans-serif;
	text-align: center;
	color: #fff;
	background: #000;
	}
	#slider li:nth-child(even) {
	background: #f00;
	}
	(function(window) {

	var MiniSlider,
	document = window.document;

	// IE8
	function eltChild(elt) {
	var child;
	if (!(child = elt.firstElementChild)) {
	child = elt.children[0];
	while (child.nodeType !== 1) {
	child = child.nextSibling;
	}
	}
	return child;
	}

	MiniSlider = function(container, elements, params) {
	var self = this,
	containerWidth = 0;

	self.eltCount = params.eltCount \|\| 6;
	self.container = container;
	self.elements = elements;
	self.steps = self.elements.length;
	self.left = self.insertButton('before', 'Previous', 'prev');
	self.right = self.insertButton('after', 'Next', 'next');
	self.step = 0;

	for (var i = 0; i < self.elements.length; ++i) {
	var elt = self.elements[i];
	containerWidth += elt.offsetWidth + (parseInt(elt.style.marginLeft, 10) \|\| 0);
	}

	eltChild(self.container).style.width = containerWidth + 'px';
	self.left.onclick = function(){ self.move.call(self, 'left'); };
	self.right.onclick = function(){ self.move.call(self, 'right'); };
	self.updateButtons();
	};

	MiniSlider.prototype.updateButtons = function() {
	this.left.disabled = this.step < 1;
	this.right.disabled = this.step + this.eltCount >= this.steps;
	};

	MiniSlider.prototype.insertButton = function(position, label, id) {
	var button = document.createElement('button');
	button.className = 'slider-btn ' + id;
	button.innerHTML = label;
	if (position === 'before') {
	this.container.parentNode.insertBefore(button, this.container);
	} else {
	this.container.parentNode.appendChild(button);
	}
	return button;
	};

	MiniSlider.prototype.move = function(direction) {
	var stepElt, leftPos = 0, parentRect, rect;
	if (direction === 'left' && this.step > 0) {
	this.step -= (this.eltCount);
	} else if (direction === 'right' && this.step < this.steps) {
	this.step += (this.eltCount);
	}

	stepElt = this.elements.item(this.step);
	parentRect = stepElt.parentNode.getBoundingClientRect();
	rect = stepElt.getBoundingClientRect();
	if (stepElt) {
	leftPos = -(rect.left - parentRect.left) - (parseInt(stepElt.style.marginLeft, 10) \|\| 0);
	eltChild(this.container).style.left = leftPos + 'px';
	}
	this.updateButtons();
	};

	MiniSlider.init = function(container, elements, params) {
	var slider = new MiniSlider(container, elements, params);
	if (slider.container.length) {
	return slider;
	}
	};

	window.MiniSlider = MiniSlider;

	}(this));