TheSanches,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slider{
position: relative;
}
.slider__container{
white-space: nowrap;
overflow: hidden;
max-width: 790px;
margin: 0 auto;
border: 1px solid #0000FF;
}
.slider__scroll{
position: relative;
left: 0;
transform: translateX(0);
transition: all 0.4s ease-in-out;
display: inline-block;
white-space: nowrap;
}
.slider__item{
display: inline-block;
margin: 0 30px;
width: 300px;
height: 100px;
background-color: #FF1493;
}
.slider__item:nth-child(2){
width: 500px;
background-color: #32CD32;
}
</style>
</head>
<body>
<div class="slider">
<div class="slider__btn slider__btn_left">left</div>
<div class="slider__btn slider__btn_right">right</div>
<div class="slider__container">
<div class="slider__scroll">
<div class="slider__item">1</div>
<div class="slider__item">2</div>
<div class="slider__item">3</div>
</div>
</div>
</div>
<script>
var sliderBtnLeft = document.querySelector('.slider__btn_left');
var sliderBtnRight = document.querySelector('.slider__btn_right');
var sliderContainer = document.querySelector('.slider__container');
var sliderItems = document.querySelectorAll('.slider__item');
var sliderIndex = 0;
var sliderScroll = document.querySelector('.slider__scroll');
var Width = 0;
function sliderMove(up){
sliderIndex = (sliderIndex + up + sliderItems.length) % sliderItems.length;
Width = 0;
for (var i = 0; i < sliderIndex; i++) {
Width += sliderItems[i].offsetWidth + 60
}
sliderScroll.style.transform = 'translateX(-' + Width + 'px)';
}
sliderBtnRight.onclick = sliderMove.bind(null, 1);
sliderBtnLeft.onclick = sliderMove.bind(null, -1);
</script>
</body>
</html>