<html>
<head>
<style>
.carousel{
clear: both;
position: relative;
margin: auto;
border: 1px solid grey;
width: 318px;
height: 106px;
overflow: hidden;
}
.row{
clear: both;
left: -33.3%;
position: relative;
width: 2000px;
overflow: hidden;
}
.item{
position: relative;
float: left;
width: 5%;
height: 100px;
outline: 1px solid grey;
margin: 3px;
transition: transform .3s;
}
.knop{
width: 145px;
height: 30px;
margin: auto;
}
.pusk{
margin: 10px;
border: 1px solid grey;
width: 50px;
height: 20px;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div class="knop">
<div class="pusk left">Left</div>
<div class="pusk right">Right</div>
</div>
<div class="carousel">
<div class="row">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
<script>
var i = 0;
var row = document.querySelector('.row');
var item = document.querySelectorAll('.item');
var w = item[0].clientWidth + parseFloat(getComputedStyle(item[0]).marginLeft)*2;
document.querySelector('.right').onclick = function(){
i--;
var first = document.querySelector('.item:first-child');
var last = document.querySelector('.item:last-child');
row.appendChild(first);
[].forEach.call(item, function(el){
el.style.cssText = 'right:'+w*i+'px; transform: translateX('+w*i+'px);';
});
};
document.querySelector('.left').onclick = function(){
i++;
var first = document.querySelector('.item:first-child');
var last = document.querySelector('.item:last-child');
row.insertBefore(last, first);
[].forEach.call(item, function(el){
el.style.cssText = 'right:'+w*i+'px; transform: translateX('+w*i+'px);';
});
};
</script>
</body>
</html>
колдовал колдовал через классы, плавно нифига не получается(если быстро кликать то-же самое что у тебя), в итоге забил и сделал как-то так.