Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.05.2022, 11:35
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 656

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

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

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

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

<!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>

Последний раз редактировалось Сергей Ракипов, 22.05.2022 в 11:39.
Ответить с цитированием
  #2 (permalink)  
Старый 22.05.2022, 12:25
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 656

Я понимаю что нужно что бы какой то парметр всегда отслеживал и обновлялся если меняется разрешение, но не могу понять как это написать
Ответить с цитированием
  #3 (permalink)  
Старый 22.05.2022, 12:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

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

<!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>

Последний раз редактировалось рони, 22.05.2022 в 13:28.
Ответить с цитированием
  #4 (permalink)  
Старый 22.05.2022, 12:51
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 656

рони,
Спасибо я Вам как всегда очень признателен )))
Ответить с цитированием
  #5 (permalink)  
Старый 22.05.2022, 12:52
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 656

А почему центральная картинка всегда в центре? То есть по идеи нужно идти слева направо. То есть когда две картинки, то это первые две, когда одна картинка то это самая первая. А тут всегда центральная.
Ответить с цитированием
  #6 (permalink)  
Старый 22.05.2022, 13:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Сообщение от Сергей Ракипов
А почему центральная картинка всегда в центре?
алгоритм видимости кнопок управления надо вычислять))) ... пока просто добавьте так строка 166

_transformItem('right');
_transformItem('left');
Ответить с цитированием
  #7 (permalink)  
Старый 22.05.2022, 13:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

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

Последний раз редактировалось рони, 22.05.2022 в 13:30.
Ответить с цитированием
  #8 (permalink)  
Старый 22.05.2022, 14:30
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 656

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение контента при скроле. DeNick Общие вопросы Javascript 2 11.05.2016 11:50
Изменение стиля всех одинаковых классов при наведение(клике) dmitriy39reg jQuery 10 03.02.2015 14:27
Изменение псевдокласса DISABLED при активации события Electron Общие вопросы Javascript 30 14.11.2011 11:42
Изменение изображения при наведении mishko_o Элементы интерфейса 4 24.10.2011 16:20
Изменение позиции блоков при увеличении изображения vyrtime Общие вопросы Javascript 2 14.10.2011 12:24