Есть 9 картинок, смена присходит по 3 картинки, ширина картинки 130;есть анимация css.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="carousel">
<a href="#" class="arrow left-arrow" id="prev">‹ </a>
<div class="gallery">
<ul id="images">
<li><img src="1.png"></li>
<li><img src="2.png"></li>
<li><img src="3.png"></li>
<li><img src="4.png"></li>
<li><img src="5.png"></li>
<li><img src="6.png"></li>
<li><img src="7.png"></li>
<li><img src="8.png"></li>
<li><img src="9.png"></li>
</ul>
</div>
<a href="#" class="arrow right-arrow" id="next">› </a>
</div>
<script>
var ul = document.getElementById('images');
var position=0;
document.getElementById('prev').onclick = function() {
if(position>-130*6)
{
position=position - 130*3;
ul.style.marginLeft = position + 'px';
}
};
document.getElementById('next').onclick = function() {
if(position<-20)
{
position=position + 130*3;
ul.style.marginLeft = position + 'px';
}
};
</script>
</body>
</html>