На странице есть два слайдера. Как правильно реализовать, чтобы первый слайдер был только на моб. версии, а второй на всех?

Уже несколько месяцев самостоятельно изучаю верстку, столкнулся с недопониманием, а спросить не у кого.
На странице есть два слайдера, сам слайдер реализован отдельным БЭМ блоком, так как эти слайдеры внешне идентичны. Как можно наименьшим кодом в css сделать так, чтобы первый слайдер был только на мобильной версии, а второй на всех? Я сам решил сделать так, в css все элементы блока Slider реализованы с двойной вложенностью, т.е Slider Slider__element и в JS при смене вьюпорта удаляю класс Slider (у первого блока, который в мобильной версии представляет собой слайдер) и стили слайдера у него отменяются. Но мне такое решение не очень нравится, так как приходится использовать JS для такой мелочи...
(Надеюсь выразился понятно, ведь код приложить не могу, т.к. он на рабочей машине)
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ответы на вопрос 1
@ArtJH
1) Добавляешь дополнительный класс слайдерам. Например slider__desktop и slider__mobile
2) в css
.slider__desktop{
display: block;
}
.slider__mobile{
display: none;
}

медиа запрос если ширина экрана меньше 768, то 
.slider__desktop{
display: none;
}
.slider__mobile{
display: block;
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
19 сент. 2020, в 12:04
1000 руб./в час
19 сент. 2020, в 11:59
20000 руб./за проект
19 сент. 2020, в 11:26
17500 руб./за проект