JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="slider">
<a href="" id="butRight"></a>
<a href="" id="butLeft"></a>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
</body>
CSS
#slider{
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.img{
position: absolute;
width: 100%;
height: 400px;
}
.img:nth-child(3){
background-color: green;
}
.img:nth-child(4){
background-color: grey;
}
.img:nth-child(5){
background-color: darkcyan;
}
.img:nth-child(6){
background-color: darkkhaki;
}
#butRight,#butLeft{
z-index: 200;
position: absolute;
top:200px;
width: 40px;
height: 40px;
background-color: yellow;
}
#butRight{
right: 5px;
}
#butLeft{
left: 5px;
}
JavaScript
var slider = {
startWidth: $('#slider').width(),
imgs: $('.img'), // Массив слайдов
getWidth: function () { // Вычисляю текущую ширину
var currWidth = $('#slider').width();
return currWidth;
},
getLeft: function (i) { //Вычисляю текущее значение лефт
return Number(slider.imgs.eq(i).css('left').slice(0, -2))
},
getStartPosition: function () { // при загрузке окна позиционирую элементы
slider.getWidth();
for (var i = 0; i<= slider.imgs.length - 1; i++){
slider.imgs.eq(i).css('left', (slider.getWidth() * i) + 'px');
}
},
nextSlide: function (e) { // Правая нопка - слайды в перед
e.preventDefault();
for(var i = 0; i <=slider.imgs.length -1; i++){
slider.imgs.eq(i).css('left',(slider.getLeft(i) -slider.getWidth()) +'px');
}
},
prevSlider: function (e) { // Левая кнопка - слайды назад
e.preventDefault();
for(var i = 0; i <=slider.imgs.length -1; i++){
slider.imgs.eq(i).css('left',(slider.getLeft(i) +slider.getWidth()) +'px');
}
}
};
slider.getStartPosition();
$('#butRight').click(slider.nextSlide);
$('#butLeft').click(slider.prevSlider);