Как добавить слайдер в мобильную версию?

Question

[Андрей Самодуров]

Всем привет!

Как сделать чтобы блоки при уменьшении разрешения экрана (например >1200) становились слайдером? Использовать хочу Slick.

Помогите пожалуйста.

Вот эти блоки.

Answer 1

[Danny Arty]

Попробуйте так:

if (window.matchMedia("(max-width: 1200px)").matches) {
  $('.happy__row').slick();
}

Comments

[Андрей Самодуров]

Это помогло, спасибо! Только не всегда срабатывает. Например сужаю страницу - появился слайдер, обратно расширяю слайдер остается или захожу с мобилки слайдера нет, пока не перезагружу.

[Danny Arty]

Андрей Самодуров, попробуйте сделать так

$(document).ready(function() {
if (window.matchMedia("(max-width: 1200px)").matches) {
  $('.happy__row').slick();
}
});

[Андрей Самодуров]

Danny Arty, ну вот так и делал. Он словно не отслеживает само действие изменения ширины экрана. Чтобы слайдер появился или убрался, нужно перезагружать страницу. Я скорее всего прям глупые вопросы задаю, но в JS пока очень слаб, а слайдер этот нужен.

Вот блоки уже с JS

[Danny Arty]

Андрей Самодуров, ааа, тогда так

$(window).resize(function() {
if (window.matchMedia("(max-width: 1200px)").matches) {
  $('.happy__row').slick();
}
});