[Alexkor5]

Нужно проверить адаптивный слайдер-карусель с медиа запросом.
Если что-то не так напишите, что именно и помогите исправить.
Если логика неплохая тогда напишите, чтобы я мог знать, что делать дальше.
Не забудьте поиграть с увеличением и уменьшения окна браузера.

let init = () => {
    const _sliderWrapper = document.querySelector('[data-wrapper]');
    let _sliderItems = document.querySelectorAll('[data-slider-items]');
    const _sliderItem = document.querySelector('[data-slider-items]');
    const _btnLeft = document.getElementById('btnLeft');
    const _btnRight = document.getElementById('btnRight');
    let _sliderItemWidth = parseFloat(getComputedStyle(_sliderItem).width);
    let _sliderWrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width);
    let _sizeMoving = (_sliderItemWidth * 100) / _sliderWrapperWidth;
    let _transform = 0;
    let _step = -1;
    const _items = [];
    let _truly = true;
    let _isVisible = _sliderWrapperWidth / _sliderItemWidth;
 
    _sliderItems.forEach((element, index) => {
        _items.push({
            item: element,
            positions: {
                posChangable: index,
                static: index
            },
            transform: 0
        });
    });
 
    const _distance = _items.length * 100;
 
    let main = (() => {
        window.addEventListener('resize', () => {
            console.log("resize");
            console.log(window.innerWidth);
 
            console.log("action");
            reset();
        });
        _btnLeft.onclick = () => { movement('left'); console.log(_items) };
        _btnRight.onclick = () => { movement('right'); console.log(_items) };
        document.addEventListener('transitionend', () => { _truly = true });
        setInterval(() => { movement('left') },1500);
    })();
 
    let reset = () => {
        let t = 0;
        _step = -1;
        _isVisible = howMuchAre();
        _sliderItems.forEach((element, index) => {
            element.remove();
            _items[index].positions.posChangable = index;
            _items[index].positions.static = index;
            _items[index].transform = 0;
            if (element.hasAttribute('style')) {
                element.removeAttribute('style');
            }
            _transform = 0;
        });
        _sliderItems.forEach((element, index) => {
            _sliderWrapper.append(element);
        });
        if (_sliderWrapper.hasAttribute('style')) {
            _sliderWrapper.removeAttribute('style');
        }
        _sliderItems = document.querySelectorAll('[data-slider-items]');
        _sliderItemWidth = parseFloat(getComputedStyle(_sliderItem).width);
        _sliderWrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width);
        _sizeMoving = (_sliderItemWidth * 100) / _sliderWrapperWidth;
        console.log("_sizeMoving inner = " + _sizeMoving);
    }
 
    let howMuchAre = () => {
        let res = _sliderWrapperWidth / _sliderItemWidth;
        return res;
    }
 
    let movement = (direction) => {
        if (direction === 'left') {
            _step++;
            console.log("_isVisible inner = " + _isVisible);
            if (_step > findMaxMin('max') - _isVisible) {
                let indexMin = findMaxMin('min');
                let realMin = compare(indexMin);
                _items[realMin].positions.posChangable += _items.length;
                _items[realMin].transform += _distance;
                _items[realMin].item.style.transform = 'translateX(' + _items[realMin].transform + '%)';
            }
            _transform -= _sizeMoving;
        }
        if (direction === 'right') {
            _step--;
            if (_step < findMaxMin('min')) {
                let indexMax = findMaxMin('max');
                let realMax = compare(indexMax);
                _items[realMax].positions.posChangable -= _items.length;
                _items[realMax].transform -= _distance;
                _items[realMax].item.style.transform = 'translateX(' + _items[realMax].transform + '%)';
            }
            _transform += _sizeMoving;
        }
        _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
    }
 
    let compare = (indexMin) => {
        let realMin = 0;
        _items.forEach((element, index) => {
            if (element.positions.posChangable == indexMin) {
                realMin = element.positions.static;
 
            }
        });
        return realMin;
    }
 
    let findMaxMin = (what) => {
        let arrTemp = [];
        _items.forEach((element, index) => {
            arrTemp.push(element.positions.posChangable);
        });
        if (what === 'max') { return Math.max(...arrTemp) };
        if (what === 'min') { return Math.min(...arrTemp) };
    }
 
}
window.addEventListener('load', init, false);

<body>
    <div class="container">
        <header>129</header>
        <main>
            <div class="slider">
                <div class="slider__wrapper" data-wrapper>
                    <div class="slider__item" data-slider-items>
                        <div class="slider__content slider__slide-1">1</div>
                    </div>

                    <div class="slider__item" data-slider-items>
                        <div class="slider__content slider__slide-2">2</div>
                    </div>

                    <div class="slider__item" data-slider-items>
                        <div class="slider__content slider__slide-3">3</div>
                    </div>

                    <div class="slider__item" data-slider-items>
                        <div class="slider__content slider__slide-4">4</div>
                    </div>

                    <div class="slider__item" data-slider-items>
                        <div class="slider__content slider__slide-5">5</div>
                    </div>
                </div>
            </div>
            
            <button id="btnLeft" class="btn-style">Left</button>
            <button id="btnRight" class="btn-style">Right</button>
        </main>
    </div>

    <script src="script.js"></script>
    <!-- <script src="script_2.js"></script> -->
</body>

*{
    margin:0px;
    padding:0px;
}
.container{
    max-width: 1200px;
    margin:20px auto;
    height:2000px;
    border:1px solid black;
}
.bs{
    border:2px solid rgb(187, 28, 28);
}
header{
    height:100px;
    background-color: rgb(140, 182, 91);
    color:white;
}
.slider__wrapper{
    display: flex;
    transition: all .6s ease-in-out 0s;
}
.slider{
    overflow: hidden;
}
.slider__item{
    flex:0 0 50%;
}
@media (max-width:900px){
    .slider__item{
        flex:0 0 100%;
    }
}
.slider__content{
    min-height: 250px;
}
.slider__slide-1{
    background-color: rgb(251, 84, 65);
}
.slider__slide-2{
    background-color: rgb(253, 173, 43);
}
.slider__slide-3{
    background-color: rgb(80, 248, 94);
}
.slider__slide-4{
    background-color: rgb(114, 223, 250);
}
.slider__slide-5{
    background-color: rgb(116, 114, 250);
}
.slider__slide-6{
    background-color: rgb(218, 114, 250);
}
.slider__slide-7{
    background-color: rgb(250, 114, 148);
}
.slider__slide-8{
    background-color: rgb(50, 48, 53);
}