Как сделать на JS чтобы скрипт срабатывал только на определенной ширине экрана?

Question

[Yulia Khavaeva]

Есть скрипт слайдера и нужно сделать так, чтобы он срабатывал только на определенной ширине, как это сделать на чистом javascript?

Answer 1

[Михаил Р.]

Есть скрипт слайдера

Здорово!

нужно сделать так, чтобы он срабатывал только на определенной ширине

Определить необходимую ширину в условие > выполнить "срабатывание".

Window.innerWidth
Element.clientWidth

как это сделать на чистом javascript

В целом, можно и на грязном...

Answer 2

[Dino Winchester]

Как вариант можно использовать window.matchMedia.

Пример:

const slider = new Slider();
const breakpoint = window.matchMedia("(min-width: 1200px)");

if (breakpoint.matches) {
   slider.init();
}

Или:

const slider = new Slider();
const breakpoint = window.matchMedia("(max-width: 1200px)");

const breakpointChecker = () => {
   if (breakpoint.matches) {
      slider.init();
   } else {
      slider.destroy();
   }
};

breakpoint.addEventListener("change", breakpointChecker);
breakpointChecker();

У нормальных слайдеров имеются методы init() и destroy() или аналогичные методы для включения и отключения слайдера. Так вот, используя эти методы в связке с matchMedia(), можно добиться желаемого результата.

Альтернативный вариант.

Можно использовать window.innerWidth или element.clientWidth или window.outerWidth в связке с условным оператором if.

Пример:

// если ширина окна больше или равна 1200px,
// выполняем инициализацию слайдера

if(window.innerWidth >= 1200) {
   slider.init();
}

Однако данная проверка будет работать только при загрузке страницы и если нужно включать/отключать слайдер при ресайзе, то в таком случае потребуется использование обработчика с событием resize + с каким-нибудь флагом или с функцией debounce, чтобы не допускать вызова функций при каждом изменении размера окна.

Answer 3

[pjery3]

На любом более менее адекватном слайдере есть метод инициализации и удаления слайдера. Условием window.innerWidth задавайте когда удобно