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'),  // Массив слайдов
    resize: function () {
        for (var i = 0; i<= slider.imgs.length - 1; i++) {
            slider.imgs.eq(i).css('left', slider.getLeft(i) +(slider.getWidth() - slider.startWidth))
        } // Это функция только на увеличение, экрана
    },
    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');
        }

    }



};
window.onresize = slider.resize;
 slider.getStartPosition();
$('#butRight').click(slider.nextSlide);
$('#butLeft').click(slider.prevSlider);