Смена значения переменной от ширины экрана
 

Всем привет.
Поставил на сайт slick slider, 3 слайда на экран,
все работает но когда сайт открываеться на мобильном устройстве картинки и тексты накладываються друг на друга, надо сделать так чтоб при ширине экрана менее 768px отображало 1 слайд.

Переменная x отвечает за количество слайдов. С JS не знаком практически, потому по статьям в инете разобраться не смог.
Если не сложно подскажите как решить проблемму

var x = 3
$('.autoplay').slick({
slidesToShow: x,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7500,
});

Огромное спасибо, помогло

глянул сейчас документацию

responsive: [
 {
breakpoint: 768,
   settings: {
    slidesToShow: 1
}
}
]

это более правильный способ

Спасибо , так действительно лучше, работает даже без перезагрузки страницы.