Как отключить один скрипт и подключить другой при медиа запросе?

Question

[Андрей Белов]

Нужно, чтоб на дексктопе слайдер смещал влево на 60%(left:60%;), а на мобильной версии на 100%. Может есть смысл в коде подредактировать (потому, что он не работает, т.к. в нём много одинаковых названий)? Код вот такой:

let offset = 55.8; // смещение в правую сторону
                const sliderline = document.querySelector('.album_grid');
                
                // действие стрелочек на desktop
                document.querySelector('.arrow_forward').addEventListener('click', function () {
                    offset = offset - 45.2;
                    if (offset < -11) {
                        offset = 55.8;
                    }
                    sliderline.style.left = offset + '%';
                });
                
                document.querySelector('.arrow_back').addEventListener('click', function () {
                    offset = offset - 45.2;
                    if (offset < -11) {
                        offset = 55.8;
                    }
                    sliderline.style.left = offset + '%';
                });
            

            <!-- arrow mobil  для мобильной версии-->
                let offset = 0;
                    const sliderline = document.querySelector('.album_grid-mob');
                document.querySelector('.arrow_forward-mob').addEventListener('click', function () {
                    offset = offset - 100.8;
                    if (offset <= -201.6) {
                        offset = 0;
                    }
                    sliderline.style.left = offset + '%';
                    
                });
                
                document.querySelector('.arrow_back-mob').addEventListener('click', function () {
                    offset = offset - 100.8;
                    if (offset <= -201.6) {
                        offset = 0;
                    }
                    sliderline.style.left = offset + '%';
                });
            </script>
        <!-- код для Java переключения фото(слайдер) -->

Comments

[maksam07]

Java и JavaScript - разные языки

[Noder SS]

Ява != Js

Answer 1

[Андрей Белов]

Умники, видно же что это javascript. Нужно задать определенное разрешение. Ловите правильны ответ:

//это действие для десктопной версии
        if (window.matchMedia("(max-width: 767px)").matches) {
//здесь вставляете свой код*
}
//это действие для моб. версии
        if (window.matchMedia("(min-width: 767px)").matches) {
//здесь вставляете свой код*
}

Пользуйтесь на здоровье)