Форум

Сергей Ракипов · #1 (**permalink**) 22.05.2022, 11:35

У меня есть такой скрипт.

Он работает по следующему принципу, смешает блоки на определенные расстоянии. И работает нормально. НО! если я начинаю менять разрешение то работа рушится, если обновлю то все нормально

Как сделать что бы при изменение разрешение все нормально было

!!! Не знаю как сделать что бы было видно сразу три картинки. По умолчанию видно три картинки, и там нет элементов управления, когда начинаю уменьшить разрешение становится две картинки, еще уменьшаю одна картинка, при этом появляются элементы управление.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.slider {
    position: relative;
    overflow: hidden;
    width: 910px;
    margin: 0 auto;
}

.slider__wrapper {
    display: flex;
    transition: transform 0.6s ease;
}

.slider__item {
    flex: 0 0 50;
    max-width: 100%;
/*     margin: 0px 10px 0px 10px; */
}

.slider__control {
    position: absolute;
    top: 0px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    color: #fff;
    text-align: center;
    opacity: 0.5;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .5);
}

.slider__control_show {
    display: flex;
}

.slider__control:hover,
.slider__control:focus {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9;
}

.slider__control_left {
    left: 0;
}

.slider__control_right {
    right: 0;
}

.slider__control::before {
    content: '';
    display: inline-block;
    background: transparent no-repeat center center;
    background-size: 100% 100%;
}

.slider__control_left::before {
    width: 40px;
    height: 598px;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
    background-image: url(https://www.rakipov.ru/files/strelka_2.svg);
    background-repeat: no-repeat;
    background-position: top left;
    opacity: .8;
    z-index: 10;
}

.slider__control_right::before {
    width: 40px;
    height: 598px;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    background-image: url(https://www.rakipov.ru/files/strelka_2.svg);
    background-repeat: no-repeat;
    background-position: top right;
    opacity: .8;
    transform: rotate(180deg);
    z-index: 10;
}

.slider__item>div {
    line-height: 598px;
}

@media (max-width:1360px){
    .slider {
        position: relative;
        overflow: hidden;
        width: 580px;
        margin: 0 auto;
    }
}

@media (max-width:1020px){
    .slider {
        position: relative;
        overflow: hidden;
        width: 290px;
        margin: 0 auto;
    }

}
    </style>
</head>
<body>

    <div class="slider">
        <div class="slider__wrapper">
            <div class="slider__item">
                <img src="https://www.rakipov.ru/files/str2-1.jpg" height="598" width="290" alt="">
            </div>
            <div class="slider__item">
                <img src="https://www.rakipov.ru/files/str2-2.jpg" height="598" width="290" alt="">
            </div>
            <div class="slider__item">
                <img src="https://www.rakipov.ru/files/str2-3.jpg" height="598" width="290" alt="">
            </div>
        </div>
        <a class="slider__control slider__control_left" href="#" role="button"></a>
        <a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a>
    </div>

    <script>
'use strict';
var multiItemSlider = ( function () {
    return function ( selector, config ) {
        var
            _mainElement = document.querySelector( selector ), // основный элемент блока
            _sliderWrapper = _mainElement.querySelector( '.slider__wrapper' ), // обертка для .slider-item
            _sliderItems = _mainElement.querySelectorAll( '.slider__item' ), // элементы (.slider-item)
            _sliderControls = _mainElement.querySelectorAll( '.slider__control' ), // элементы управления
            _sliderControlLeft = _mainElement.querySelector( '.slider__control_left' ), // кнопка "LEFT"
            _sliderControlRight = _mainElement.querySelector( '.slider__control_right' ), // кнопка "RIGHT"
            _wrapperWidth = parseFloat( getComputedStyle( _sliderWrapper ).width ), // ширина обёртки
            _itemWidth = parseFloat( getComputedStyle( _sliderItems[ 0 ] ).width ), // ширина одного элемента    
            _positionLeftItem = 0, // позиция левого активного элемента
            _transform = 0, // значение транфсофрмации .slider_wrapper
            _step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
            _items = []; // массив элементов
        // наполнение массива _items
        _sliderItems.forEach( function ( item, index ) {
            _items.push( {
                item: item,
                position: index,
                transform: 0
            } );
        } );

        var position = {
            getMin: 0,
            getMax: _items.length - 1,
        }

        var _transformItem = function ( direction ) {
            if ( direction === 'right' ) {
                if ( ( _positionLeftItem + _wrapperWidth / _itemWidth - 1 ) >= position.getMax ) {
                    return;
                }
                if ( !_sliderControlLeft.classList.contains( 'slider__control_show' ) ) {
                    _sliderControlLeft.classList.add( 'slider__control_show' );
                }
                if ( _sliderControlRight.classList.contains( 'slider__control_show' ) && ( _positionLeftItem +
                    _wrapperWidth / _itemWidth ) >= position.getMax ) {
                    _sliderControlRight.classList.remove( 'slider__control_show' );
                }
                _positionLeftItem++;
                _transform -= _step;
            }
            if ( direction === 'left' ) {
                if ( _positionLeftItem <= position.getMin ) {
                    return;
                }
                if ( !_sliderControlRight.classList.contains( 'slider__control_show' ) ) {
                    _sliderControlRight.classList.add( 'slider__control_show' );
                }
                if ( _sliderControlLeft.classList.contains( 'slider__control_show' ) && _positionLeftItem - 1 <=
                    position.getMin ) {
                    _sliderControlLeft.classList.remove( 'slider__control_show' );
                }
                _positionLeftItem--;
                _transform += _step;
            }
            _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
        }

        // обработчик события click для кнопок "назад" и "вперед"
        var _controlClick = function ( e ) {
            if ( e.target.classList.contains( 'slider__control' ) ) {
                e.preventDefault();
                var direction = e.target.classList.contains( 'slider__control_right' ) ? 'right' : 'left';
                _transformItem( direction );
            }
        };

        var _setUpListeners = function () {
            // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
            _sliderControls.forEach( function ( item ) {
                item.addEventListener( 'click', _controlClick );
            } );
        }

        // инициализация
        _setUpListeners();

        return {
            right: function () { // метод right
                _transformItem( 'right' );
            },
            left: function () { // метод left
                _transformItem( 'left' );
            }
        }

    }
}() );

var slider = multiItemSlider( '.slider' )
    </script>
</body>
</html>

Сергей Ракипов · #2 (**permalink**) 22.05.2022, 12:25

Я понимаю что нужно что бы какой то парметр всегда отслеживал и обновлялся если меняется разрешение, но не могу понять как это написать

рони · #3 (**permalink**) 22.05.2022, 12:32

Сергей Ракипов,
как-то так ...

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .slider {
            position: relative;
            overflow: hidden;
            width: 910px;
            margin: 0 auto;
        }

        .slider__wrapper {
            display: flex;
            transition: transform 0.6s ease;
        }

        .slider__item {
            flex: 0 0 50;
            max-width: 100%;
            /*     margin: 0px 10px 0px 10px; */
        }

        .slider__control {
            position: absolute;
            top: 0px;
            display: none;
            align-items: center;
            justify-content: center;
            width: 40px;
            color: #fff;
            text-align: center;
            opacity: 0.5;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, .5);
        }

        .slider__control_show {
            display: flex;
        }

        .slider__control:hover,
        .slider__control:focus {
            color: #fff;
            text-decoration: none;
            outline: 0;
            opacity: .9;
        }

        .slider__control_left {
            left: 0;
        }

        .slider__control_right {
            right: 0;
        }

        .slider__control::before {
            content: '';
            display: inline-block;
            background: transparent no-repeat center center;
            background-size: 100% 100%;
        }

        .slider__control_left::before {
            width: 40px;
            height: 598px;
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: pointer;
            background-image: url(https://www.rakipov.ru/files/strelka_2.svg);
            background-repeat: no-repeat;
            background-position: top left;
            opacity: .8;
            z-index: 10;
        }

        .slider__control_right::before {
            width: 40px;
            height: 598px;
            position: absolute;
            top: 0px;
            right: 0px;
            cursor: pointer;
            background-image: url(https://www.rakipov.ru/files/strelka_2.svg);
            background-repeat: no-repeat;
            background-position: top right;
            opacity: .8;
            transform: rotate(180deg);
            z-index: 10;
        }

        .slider__item>div {
            line-height: 598px;
        }

        @media (max-width:1360px) {
            .slider {
                position: relative;
                overflow: hidden;
                width: 580px;
                margin: 0 auto;
            }
        }

        @media (max-width:1020px) {
            .slider {
                position: relative;
                overflow: hidden;
                width: 290px;
                margin: 0 auto;
            }

        }
    </style>
</head>

<body>
    <div class="slider">
        <div class="slider__wrapper">
            <div class="slider__item">
                <img src="https://www.rakipov.ru/files/str2-1.jpg" height="598" width="290" alt="">
            </div>
            <div class="slider__item">
                <img src="https://www.rakipov.ru/files/str2-2.jpg" height="598" width="290" alt="">
            </div>
            <div class="slider__item">
                <img src="https://www.rakipov.ru/files/str2-3.jpg" height="598" width="290" alt="">
            </div>
        </div>
        <a class="slider__control slider__control_left" href="#" role="button"></a>
        <a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a>
    </div>
    <script>
        'use strict';
        var multiItemSlider = (function() {
            return function(selector, config) {
                var
                    _mainElement = document.querySelector(selector), // основный элемент блока
                    _sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item
                    _sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item)
                    _sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления
                    _sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"
                    _sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"
                    _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
                    _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента
                    _positionLeftItem = 0, // позиция левого активного элемента
                    _transform = 0, // значение транфсофрмации .slider_wrapper
                    _step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
                    _items = []; // массив элементов

                window.addEventListener('resize', function() {
                    _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width); // ширина обёртки
                    _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width); // ширина одного элемента
                    _positionLeftItem = 1; // позиция левого активного элемента
                    _step = _itemWidth / _wrapperWidth * 100; // величина шага (для трансформации)
                    _transform = -_step; // значение транфсоформации .slider_wrapper
                    _transformItem('left');
                });


                // наполнение массива _items
                _sliderItems.forEach(function(item, index) {
                    _items.push({
                        item: item,
                        position: index,
                        transform: 0
                    });
                });

                var position = {
                    getMin: 0,
                    getMax: _items.length - 1,
                }

                var _transformItem = function(direction) {
                    if (direction === 'right') {
                        if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position.getMax) {
                            return;
                        }
                        if (!_sliderControlLeft.classList.contains('slider__control_show')) {
                            _sliderControlLeft.classList.add('slider__control_show');
                        }
                        if (_sliderControlRight.classList.contains('slider__control_show') && (_positionLeftItem +
                                _wrapperWidth / _itemWidth) >= position.getMax) {
                            _sliderControlRight.classList.remove('slider__control_show');
                        }
                        _positionLeftItem++;
                        _transform -= _step;
                    }
                    if (direction === 'left') {
                        if (_positionLeftItem <= position.getMin) {
                            return;
                        }
                        if (!_sliderControlRight.classList.contains('slider__control_show')) {
                            _sliderControlRight.classList.add('slider__control_show');
                        }
                        if (_sliderControlLeft.classList.contains('slider__control_show') && _positionLeftItem - 1 <=
                            position.getMin) {
                            _sliderControlLeft.classList.remove('slider__control_show');
                        }
                        _positionLeftItem--;
                        _transform += _step;
                    }
                    _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
                }

                // обработчик события click для кнопок "назад" и "вперед"
                var _controlClick = function(e) {
                    if (e.target.classList.contains('slider__control')) {
                        e.preventDefault();
                        var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
                        _transformItem(direction);
                    }
                };

                var _setUpListeners = function() {
                    // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
                    _sliderControls.forEach(function(item) {
                        item.addEventListener('click', _controlClick);
                    });
                }

                // инициализация
                _setUpListeners();

                return {
                    right: function() { // метод right
                        _transformItem('right');
                    },
                    left: function() { // метод left
                        _transformItem('left');
                    }
                }

            }
        }());

        var slider = multiItemSlider('.slider')
    </script>
</body>

</html>

Сергей Ракипов · #4 (**permalink**) 22.05.2022, 12:51

рони,
Спасибо я Вам как всегда очень признателен )))

Сергей Ракипов · #5 (**permalink**) 22.05.2022, 12:52

А почему центральная картинка всегда в центре? То есть по идеи нужно идти слева направо. То есть когда две картинки, то это первые две, когда одна картинка то это самая первая. А тут всегда центральная.

рони · #6 (**permalink**) 22.05.2022, 13:10

Сообщение от Сергей Ракипов

А почему центральная картинка всегда в центре?

алгоритм видимости кнопок управления надо вычислять))) ... пока просто добавьте так строка 166

_transformItem('right');
_transformItem('left');

рони · #7 (**permalink**) 22.05.2022, 13:26

Сергей Ракипов,
пост #3 изменён
window.addEventListener('resize', ....

Сергей Ракипов · #8 (**permalink**) 22.05.2022, 14:30

рони,
ВЫ не представляете сколько благодарности у меня к вам за все эти годы
Спасибо)

Форум

Справочник

Discord чат

Курсы javascript