Как отключить Slick Slider на определенной ширине и сделать так, чтобы он вновь включился?

У меня есть слайдер (реализованный через Slick-Slider), который активен до 1024px.
При большей ширине экрана отключаю его с помощью settings: 'unslick'. При таком решении, слайдер не запустится вновь при сужении экрана.
Нашел такое решение
$(window).on("load resize", function () {
		if ($(document).width() < 1024) {
			$('.gallery-slider').slick({
				mobileFirst: true,
				responsive: [
					{
						breakpoint: 1023,
						settings: 'unslick',
					},
				]
			});
		}
	});

Но это решение вызывает ошибки в консоли при каждом изменении ширины экрана.
63ca5e861b525141644248.jpeg
Есть ли какое-то проверенное решение этой ситуации, которым все пользуются?
  • Вопрос задан
  • 105 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Да забудьте вы уже про resize!
Есть же matchMedia. Сделайте два медиавыражения
(min-width: 1024px)
(max-width: 1023px)
В одном инициализируйте плагин, в другом удаляйте. Обработчик matchMedia вызывается один раз при срабатывании медиа-выражения, а не на каждый чих, как resize, проблем не будет.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы