Как заставить slick-slider срабатывать при ресайзе страницы?

Question

[Сергей Маргелов]

Добрый день.
Есть страница с тремя слайдерами на ней. Все слайдеры сделаны на slick. Один из них работает на всех разрешениях ( с ним всё в порядке), а два других должны включаться только на мобильных (480px и ниже). Они работают. Только есть проблема. Если ресайзнуть страницу вверх, то эти два слайдера отключаются и и слайды выстраиваются в нужные мне блоки, но если уменьшить окно, то срабатывают только css изменения, но слайдер не включается. Для срабатывания приходится перезагружать страницу.
Страница с проблемой
Приму даже костыльный вариант решения, хотя в идеале — хотелось бы разобраться подробно.

Answer 1

[ProjectSoft]

// Подпишемся на ресайз и продиспатчим его для запуска
$(window).on('resize', function(e){
	// Переменная, по которой узнаем запущен слайдер или нет.
	// Храним её в data
	var init = $(".card-box").data('init-slider');
	// Если мобильный
	if(window.innerWidth < 480){
		// Если слайдер не запущен
		if(init != 1){
			// Запускаем слайдер и записываем в data init-slider = 1
			$('#card-box').slick({
				infinite: true,
				slidesToShow: 1,
				slidesToScroll: 1
			}).data({'init-slider': 1});
		}
	}
	// Если десктоп
	else {
		// Если слайдер запущен
		if(init == 1){
			// Разрушаем слайдер и записываем в data init-slider = 0
			$('#card-box').slick('unslick').data({'init-slider': 0});
		}
	}
}).trigger('resize');

https://monosnap.com/file/Jw6PomDPOuv54bY25640JxAz...

Comments

[Сергей Маргелов]

Огромное спасибо. Всё заработало.
Отдельная благодарность за такое подробное объяснение. Всегда восхищался людьми, которые готовы так терпеливо объяснять всё новичкам.

[ProjectSoft]

Сергей Маргелов, спасибо большое за благодарность.))
Хотя это нормальная практика комментировать код в исходниках. Вы его сжимаете, а ведь самому потом будет легко разобраться если вернуться к нему черен N-ое время.

И зря на git не пулите сами исходники.

[Сергей Маргелов]

ProjectSoft, это всё gulp. В папке src всё разжато, да и поделено на очень много частей. А вот комментарии да, ленюсь писать. Надо исправляться. Ещё раз спасибо

[Nichtiak]

Спасибо. Тоже была подобная проблема. Спасибо за код и за пояснение кода.

Answer 2

[akavato]

Нужно реинициализировать слик, если до этого использовался unslick. Как-то так наверное.

addDomListener(window, 'resize', function () {
    if (условие) {
    $('.your-class').slick({
    setting-name: setting-value
  });
}
}

Comments

[Сергей Маргелов]

Попробовал ваш вариант: в ответ Unexpected token

Тогда попробовал закинуть код вызова в функцию, а её вызывать по изменению окна

$(window).on('load resize', slickResizeUpdate);

красная консоль и никакого результата (((

[akavato]

Я описал принцип работы, не конкретный код. Unexpected token - синтаксическая ошибка в коде, какой-нибудь скобки закрывающей нет или ещё чего-нибудь. Код ProjectSoft полный, действует по принципу, как я описал.