Удаление/добавление класса при сужении экрана?

Question

[NotNight]

Приветсвую!

Подключил slick слайдер, отрабатывает всё корректно, но нужно сделать, чтоб слайдер появлялся только при разрешении ниже 768px.
Почему не получается удалить класс, если разрешение больше указанного?

Если кто сможет подсказать, заранее благодарю!
https://codepen.io/BigMedved/pen/oNqzBZj

Answer 1

[Сергей delphinpro]

1. лучше не класс удалять, а сам слайдер отключить. У него есть метод unslick
2. Не нужно ширину чекать, лучше использовать matchMedia и в нем переключать слайдер

Comments

[NotNight]

Спасибо за совет! Буду у ПК, попробую

[NotNight]

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

if(window.matchMedia('(max-width: 610px)').matches)
{
  $('.multiple-items').slick({
    dots: true,
    infinite: true,
    slidesToShow: 2,
    slidesToScroll: 3,
    arrow: true,
    
   
    responsive: [
      {
        breakpoint: 460,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          dots: true
        }
      },
    ]
});
};

[Сергей delphinpro]

NotNight,

const mediaQueryList = window.matchMedia("(max-width: 610px)");
function handleOrientationChange(mql) {
  if(mql.matches) {
    $('.multiple-items').slick(); // включить слайдер
  } else {
    $('.multiple-items').slick('unslick'); // выключить слайдер
  }
}

// Run the orientation change handler once.
handleOrientationChange(mediaQueryList);

// Add the callback function as a listener to the query list.
mediaQueryList.addEventListener("change", handleOrientationChange);