Почему настройки слайдера включаются после перезагрузки?

Question

[drtvader]

Добрый день! Почему настройки для слайдера для разных разрешений включаются только после перезагрузки браузера?

function carousel_company() {
    var window_width = $(window).width();

    if (window_width > 992) {
        $('.js-brand-carousel-company').slick({
          arrows: false,
          slidesToShow: 3,
          slidesToScroll: 3
        });
        console.log(window_width)
    } else if (window_width <= 991) {
        $('.js-brand-carousel-company').slick({
            dots: true,
            slidesToShow: 1,
            slidesToScroll: 1,
        });
    }
}

$(document).ready(function(){
    carousel_company();
});

Answer 1

[Алексей Захаров]

У слик есть настройка адаптивности вообще-то

$('#recomendationsSlider').slick({
			autoplay: false,
			slidesToShow: 4,
			arrows: true,
			dots:false,
			lazyLoad: 'ondemand',
			responsive: [
		    {
		      breakpoint: 1200,
		      settings: {
		        slidesToShow: 3,
		        slidesToScroll: 3,
		        infinite: true,
		      }
		    },
		    {
		      breakpoint: 992,
		      settings: {
		        slidesToShow: 2,
		        slidesToScroll: 2
		      }
		    },
		    {
		      breakpoint: 580,
		      settings: {
		        slidesToShow: 1,
		        slidesToScroll: 1
		      }
		    }
		    // You can unslick at a given breakpoint now by adding:
		    // settings: "unslick"
		    // instead of a settings object
		  ],
		  nextArrow: $('.arrow-right'),
		  prevArrow: $('.arrow-left'),
		});

Comments

[Rob1n Bobin]

Алексей Захаров это только для тех, кто в инглише шарит)

Answer 2

[drtvader]

Всё проще оказалось!

$('.js-brand-carousel-company').slick({
    arrows: false,
    slidesToShow: 3,
    slidesToScroll: 3,
    responsive: [
        { breakpoint: 992,
            settings: {
                dots: true,
                slidesToShow: 1,
                slidesToScroll: 1,
        }},
    ]
});

Answer 3

[Дмитрий Карякин]

Потому, что функция carousel_company() запускается 1 раз при загрузке страницы. Чтобы она срабатывала каждый раз при изменении размера нужно повесить на событие resize для объекта window. https://api.jquery.com/resize/

Comments

[drtvader]

Как-то так должно выглядеть?
$(window).on("resize", function () {
carousel_company();
});

function carousel_company() {
var window_width = $(window).width();

if (window_width > 992) {
$('.js-brand-carousel-company').slick({
arrows: false,
slidesToShow: 3,
slidesToScroll: 3
});
console.log(window_width)
} else if (window_width <= 991) {
$('.js-brand-carousel-company').slick({
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
});
}
}

[Дмитрий Карякин]

Да

[drtvader]

Дмитрий Карякин: тогда совсем не работает.

[Dimon]

Подебаж свой код, поставь распечатку console.log('test') во всех блоках, начиная сначала, потом открой консоль, и меняй размер окна, и смотри где срабатывает console.log() а где нет.... Распечатай console.log(window_width); - может у тебя не находит на странице ... или вообще resize не работает...

[drtvader]

Dimon: хорошо, буду пробовать.