Как добавить класс в зависимости от ширины экрана?
Вам не класс нужно переключать на элементе, а включать и выключать слайдер, при достижении определенного брейкпоинта. Всё это дело можно легко решить с помощью matchMedia.

Вот небольшой пример:

const slider = $(".slider").slick({
     centerMode: true,
     slidesToShow: 4
});

const breakpoint = window.matchMedia("(max-width: 992px)");

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

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

А вот для дополнительной стилизации контейнера, уже можно использовать медиа запросы в CSS.
Простой пример с цветом. Пользователь, у которого ширина меньше 1000, будет видеть красный цвет.
<!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>
</head>
<body>
    <p class="text">Текст</p>
</body>
<style>
    .class{
        color: red;
    }
</style>
<script>
    let text = document.querySelector('.text')
    if(document.documentElement.clientWidth < 1000){
        text.classList.add('class')
    }
</script>
</html>