Маленькая карусель

Карусель конечная, т.е. у неё есть начало и конец, она не "по кругу".

Пример использования

Код для реализации

<div class="carousel" id="carousel">
	<div class="arrowOut arrowOutLeft"><div class="arrow arrowLeft"></div></div>
	<div class="arrowOut arrowOutRight"><div class="arrow arrowRight"></div></div>

	<div class="carouselInn">
		<ul>
			<li><img src="/photo/best/min/1.jpg"></li>
			<li><img src="/photo/best/min/2.jpg"></li>
			<li><img src="/photo/best/min/3.jpg"></li>
			<li><img src="/photo/best/min/4.jpg"></li>
			<li><img src="/photo/best/min/5.jpg"></li>
			<li><img src="/photo/best/min/6.jpg"></li>
			<li><img src="/photo/best/min/7.jpg"></li>
			<li><img src="/photo/best/min/8.jpg"></li>
			<li><img src="/photo/best/min/9.jpg"></li>
			<li><img src="/photo/best/min/10.jpg"></li>
		</ul>
	</div>
</div>

.carousel{
	width: 390px;
	height: 130px;
	padding: 30px;
	position: relative;
	background: #89b4ff;
	border: 1px solid #2252a9;
	border-radius: 10px;
	margin: 0 auto;
}
.carouselInn{
	width: 390px;
	height: 130px;
	overflow: hidden;
}
.arrowOut {
  width: 20px;
  height: 20px;
  padding: 0;
  background: #ddd;
  border-radius: 15px;
  border: 1px solid gray;
  font-size: 24px;
  line-height: 24px;
  color: #444;
  display: block;
  position: absolute;
  top: 75px;
  text-align: center;
  line-height: 17px;
}
.arrow{
    margin:0;
}
.arrowOutLeft{
	left: 8px;
}
.arrowOutRight{
	right: 8px;
}
.arrowOut:focus {
  outline: none;
}

.arrowOut:hover {
  background: #ccc;
  cursor: pointer;
}

.carousel ul {
  height: 130px;
  width: 9999px;
  margin: 0;
  padding: 0;
  list-style: none;

  font-size: 0;

  transition: margin-left 1s;
}
.carousel ul img {
  width: 100px;
  height: 75px;
  display: block;
}
.carousel ul li {
  display: inline-block;
  padding: 28px 15px 27px 15px;
} 

// конфигурация 
var width = 130; // ширина изображения
var count = 3; // количество изображений

var carousel = document.getElementById('carousel');
var list = carousel.querySelector('ul');
var listElems = carousel.querySelectorAll('li');

var position = 0; // текущий сдвиг влево

carousel.querySelector('.arrowOutRight').onclick = function() {
  // сдвиг вправо
  // последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
  position = Math.max(position - width * count, -width * (listElems.length - count));
  list.style.marginLeft = position + 'px';
}
carousel.querySelector('.arrowOutLeft').onclick = function() {
  // сдвиг влево
  // последнее передвижение влево может быть не на 3, а на 2 или 1 элемент
  position = Math.min(position + width * count, 0);
  list.style.marginLeft = position + 'px';
}