Как включить слайдер slick на определенном разрешении, и отключать при ресайзе окна?

Question

[glem1337]

Сделал таким способом, он мне он не нравится, т.к. в консоль сыпятся ошибки

var clientWidth = document.body.clientWidth;

$('.tales__slider').slick({
		arrows: false,
		dots: true,
		infinite: true,
		slidesToScroll: 1,
		variableWidth: true
	});

function resizeTaleSlider(clientWidth) {
		if (clientWidth < 992) {
			$('.tales__slider').slick({
				arrows: false,
				dots: true,
				infinite: true,
				slidesToScroll: 1,
				variableWidth: true
			});
		} else {
			$('.tales__slider').slick("unslick");
		}
	}

	resizeTaleSlider(clientWidth);

	$(window).resize(function() {
		let clientWidth = document.body.clientWidth;
		resizeTaleSlider(clientWidth);
	});

Вообщем мне такой способ кажется костыльным, есть ли "нативный" способ решить эту проблему? В официальных доках по этому поводу ничего не нашел.

Answer 1

[Денис Васильев]

Посмотрите опцию responsive.

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

$('.tales__slider').slick({
  arrows: false,
  dots: true,
  infinite: true,
  slidesToScroll: 1,
  variableWidth: true,
  mobileFirst: true,
  responsive: [{
    breakpoint: 992,
    settings: 'unslick'
  }]
});

Comments

[glem1337]

Я делал еще вот так:

$('.tales__slider').slick({
		responsive: [
		{
			breakpoint: 100000,
			settings: "unslick"
		},
		{
			breakpoint: 992,
			settings: {
				arrows: false,
				dots: true,
				infinite: true,
				slidesToScroll: 1,
				variableWidth: true,
			}
		}
		]
	});

Результат тот же что и у вас, только у вас более правильный вариант. Однако при ресайзе слайдер не хочет обратно construct-титься.