Как инициализировать slick slider только для разрешения мнее 768px?

Question

[natoje-zlo]

Как инициализировать slick slider только для разрешения мнее 768px ?

$('.single-item').slick();

Answer 1

[Антон Литвиненко]

$(window).on('resize', function(e){
	// Переменная, по которой узнаем запущен слайдер или нет.
	var initLib = $('.library-slider').data('init-slider');

	if(window.innerWidth < 768){
		// Если слайдер не запущен
		if(initLib != 1){
			// Запускаем слайдер и записываем в data init-slider = 1
			$('.library-slider').slick({
				arrows: false,
				dots: true,
				slidesToShow: 3,
				slidesToScroll: 1,
				responsive: [
					{
						breakpoint: 576,
						settings: {
							slidesToShow: 2,
							slidesToScroll: 1,
						}
					},
					{
						breakpoint: 480,
						settings: {
							slidesToShow: 1,
							slidesToScroll: 1,
						}
					}
				]
			}).data({'init-slider': 1});
		}
	}
	// Если десктоп
	else {
		// Если слайдер запущен
		if(initLib == 1){
			// Разрушаем слайдер и записываем в data init-slider = 0
			$('.library-slider').slick('unslick').data({'init-slider': 0});
		}
	}
}).trigger('resize')

Comments

[natoje-zlo]

Благодарю