Почему slick slider не отрабатывает корректно?

Question

[Валентин Попов]

У меня слайдер на странице должен работать только на мобильной версии. На десктопах он должен прекращать работу. Сделал следующий код, но все равно при обновлении страницы слайдер работает и он только отключается если я открываю панель разработчика в браузере или изменяю окно браузера, вот код:

$(function () {
$(window).on('load resize', function () {
		var withWindow = window.innerWidth;
		if (withWindow > 480) {
			$('.js-slider').slick('unslick');
		}
	});
let sliderOne = function () {

		$('.js-slider').slick({
			infinite: false,
			speed: 500,
			arrows: true,
			fade: true,
			dots: false,
			slidesToShow: 1,
			slidesToScroll: 1,
			prevArrow: '<svg class="icon-svg icon-svg--arrows icon-svg--prev"><use xlink:href="#arrow_slider"></use></svg>',
			nextArrow: '<svg class="icon-svg icon-svg--arrows icon-svg--next"><use xlink:href="#arrow_slider"></use></svg>',
			appendArrows: $('.s-shale__arrows'),

			responsive: [{
					breakpoint: 9999,
					settings: "unslick"
				},
				{
					breakpoint: 480,
					settings: {
						slidesToShow: 1,
						slidesToScroll: 1
					}
				}
			]
		});

	};
	sliderOne();
});

Почему он не хочет отключаться сразу нормально без ресайза окна браузера?

Comments

[Антон]

А почему в media не задисплейнонить просто?

[Валентин Попов]

Антон, потому что на десктопах он у меня выглядит как галерея - одно большое фото и под ним несколько миниатиюр, на мобильных я это все превращаю в слайдер

Answer 1

[Alams Stoyne]

А нафига вообще делать слайдер а потом его отключать?
Может логичнее запускать слайдер только когда он нужен?

$(function () {
	let sliderOne = function () {
		$('.js-slider').slick({
		infinite: false,
		speed: 500,
		arrows: true,
		fade: true,
		dots: false,
		slidesToShow: 1,
		slidesToScroll: 1,
		prevArrow: '<svg class="icon-svg icon-svg--arrows icon-svg--prev"><use xlink:href="#arrow_slider"></use></svg>',
		nextArrow: '<svg class="icon-svg icon-svg--arrows icon-svg--next"><use xlink:href="#arrow_slider"></use></svg>',
		appendArrows: $('.s-shale__arrows')
		});
	};	
	$(window).on('load resize', function () {
		var withWindow = window.innerWidth;
		if (withWindow < 480) {
			sliderOne();
		}else{
			$('.js-slider').slick('unslick');
		}
	});
});

Answer 2

[Gor Mkhitaryan]

У вас триггер стоит на resize, вам нужно написать что-то типа

$(document).ready(function () {
    var withWindow = window.innerWidth;
    if (withWindow > 480) {
      $('.js-slider').slick('unslick');
    }
  });

вместо

$(window).on('load resize', function () {
    var withWindow = window.innerWidth;
    if (withWindow > 480) {
      $('.js-slider').slick('unslick');
    }
  });

Comments

[Валентин Попов]

Как Вы предлагаете я пробовал. В таком случае даже при изменении окна браузер слайдер не перестает работать