Задать вопрос
@Ba1tazarr
Начинающий фронтенд разработчик
javascript

Как добавить класс в зависимости от ширины экрана?

Есть блок с 5 элементами в два ряда (три сверху и два с низу). Нужно чтобы при адаптиве это все прекращалось в слайдер (карусель) и показывалось по одному с перелистыванием. Подключил slick и думаю при изменении разрешения экрана добавлять нужному блоку класс, который инициализирую в slick. Как сделать это через JS?
  • Вопрос задан
  • 105 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
mizutsune
@mizutsune
Frontend Developer
Вам не класс нужно переключать на элементе, а включать и выключать слайдер, при достижении определенного брейкпоинта. Всё это дело можно легко решить с помощью 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.
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик
Простой пример с цветом. Пользователь, у которого ширина меньше 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>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Доработать обмен заказами 1с
11 мая 2024, в 00:19
1000 руб./за проект
Разработка сайта (верстка)
10 мая 2024, в 23:51
30000 руб./за проект
Опубликовать приложение в Google play
10 мая 2024, в 23:33
2500 руб./за проект
Ещё заказы