Форум

Alexkor5 · #1 (**permalink**) 09.09.2020, 14:41

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

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);
}

рони · #2 (**permalink**) 09.09.2020, 15:51

Alexkor5,
а можно целиком, а не частями.

[html run]
... минимальный код страницы с вашей проблемой
[/html]

Alexkor5 · #3 (**permalink**) 11.09.2020, 13:04

Чего не хватает?
Вроде как все сбросил.

Alexkor5 · #4 (**permalink**) 11.09.2020, 13:14

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            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);
        }
    </style>
    <title>Document</title>
</head>

<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>
        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);

    </script>

</body>

</html>

рони · #5 (**permalink**) 11.09.2020, 14:10

Сообщение от Alexkor5

Вроде как все сбросил.

атрибута run не хватает в теге форматирования.

Сообщение от Alexkor5

Если что-то не так напишите, что именно

нет отключения режима авто.

Сообщение от Alexkor5

помогите исправить.

на форуме сотни примеров с необходимым вам функционалом, надо только поискать.
https://javascript.ru/forum/dom-wind...tml#post430374

Форум

Справочник

Discord чат

Курсы javascript