Вызов slickslider для адаптивного сайта

Для слайдеров/каруселей нравится использовать slick slider. Самая большая его ценность в умении делать зависимые карусели. Эта особенность делает его очень гибким для внедрения в верстку.
Однако есть и несколько проблем в его использовании. Например, при адаптивной верстки у него проблемы с перезапуском. Например, в десктопном исполнении нам не нужен слайдер, а должны выводится только несколько изображений. При постепенном уменьшении размера браузера должен активироваться слайдер, и потом уменьшаться кол-во видимых слайдов. При увеличении экрана — процесс в обратном порядке. В десктопе слайдер должен отключиться.
Как я понял, это должно было работать так
$('.proekt__list').slick({
	slidesToShow: 1,
	slidesToScroll: 1,
	dots: true,
	arrows: true,
	centerPadding: '0px',
	centerMode: true,
	focusOnSelect: true,
	adaptiveHeight: true,
	responsive: [{
		breakpoint: 99999,
		settings: "unslick"
	}, {
		breakpoint: 768,
		settings: {
			slidesToShow: 1,
			arrows: true,
		}
	}, {
		breakpoint: 374,
		settings: {
			slidesToShow: 1,
			arrows: false,
		}
	}]
});
И оно работает при первом запуске, но стоит несколько раз изменить размер окна браузера — и все перестает нормально работать.

Пришел к такому виду вызова slick слайдера как оптимальному (ИМХО). Так как не работает нормально параметр unslick.
var main_product_slider = false;
initMainProductSlider = function() {
    selector = '.product-slider';
    if ($(window).width()<1050) {
        if (!main_product_slider) {
            $(selector).slick({
                'autoplay': false,
                'arrows': false,
                'dots': true,
                'slidesToShow': 3,
                'slidesToScroll': 1,
                'initialSlide': 1,
                'infinite': false,
                'adaptiveHeight': true,
                'responsive': [
                    {
                        breakpoint: 750,
                        settings: {
                            vertical: false,
                            dots: false,
                            slidesToShow:2
                        }
                    },
                    {
                        breakpoint: 450,
                        settings: {
                            vertical: false,
                            dots: true,
                            slidesToShow: 1
                        }
                    }
                ]
            });
            main_product_slider = true;
        }
    } else {
        if (main_product_slider) {
            $(selector).slick('unslick');
            main_product_slider = false;
        }
    }
};
Добавляю вызов функции при загрузке страницы
$(function() {
  initMainProductSlider();
});
Вешаю выполнение на resize страницы
var doresizepage;
$(window).resize(function(){
    clearTimeout(doresizepage);
    doit = setTimeout(resizepage, 100);
});
function resizepage(){
    initMainProductSlider('.product-slider');
}

Нет комментариев