Как перезапускать slick slider при ресайзе?

1505
11 февраля 2017, 09:13

Привет!
Использую slick slider, у него есть свойство rows, которое необходимо на одном разрешении.
В итоге когда начинает работать это свойство, слик разбивает блок на отдельные блоки и все ломается.
Решил пойти иным путем, накидал скрипт

var width = window.innerWidth || document.body.clientWidth;
var $slick = $('.js-slider-gift');

function initSlick() {
    if(width < 960) {
        if ($slick.hasClass('slick-initialized')) {
           $slick.slick('unslick');
        };
        $slick.slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: false,
            mobileFirst: true,
            arrows: false,
            variableWidth: true,
            responsive: [
                {
                    breakpoint: 599,
                    settings: {
                        slidesToShow: 2
                    }
                }
            ]
        });
    };
    if (width >= 960) {
        $slick.slick({
            rows: 2,
            slidesToShow: 3,
            slidesToScroll: 3,
            arrows: true,
            infinite: false,
            dots: false,
            prevArrow: '<a href="javascript:void();" class="b-product-carousel-gift__arrow b-product-carousel-gift__arrow--prev carousel-control left"></a>',
            nextArrow: '<a href="javascript:void();" class="b-product-carousel-gift__arrow b-product-carousel-gift__arrow--next carousel-control right"></a>',
            responsive: [
                {
                    breakpoint: 1300,
                    settings: {
                        rows: 2,
                        slidesToShow: 2,
                        slidesToScroll: 2,
                    }
                }
            ]
        });
    };
};

$( window ).resize(function() {
    initSlick();
});
$(document).ready(function() {
    initSlick();
});

Решил сделать unslick, но беда в том, что при ресайзах слайдер не перестраивается. Не могу понять как сделать сначала unslick, а затем снова запуск. Режим респонзив у слика не работает. Там как раз ломает верстку.

Answer 1

Может так ?

$(document).ready(function() {
    initSlick();
    $( window ).on('resize',function() {
    initSlick();
  });
});

т.е при каждом изменении размера окна вы заново вызываете вашу функцию инициализации.

READ ALSO
Как исправить баг с play pause HTML5 в google chrome?

Как исправить баг с play pause HTML5 в google chrome?

При разработке радиоприёмника столкнулся с проблемой в google chromeИменно в chrome, что самое поразительное, в остальных браузерах всё работает...

374
Как передавать параметр css при скроле?

Как передавать параметр css при скроле?

Добрый день, подскажите как предать параметры css во время скрола страницыНапример если я начинаю скролить страницу transform: scale(0

302
Нет доступа к API новой почты

Нет доступа к API новой почты

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

327
Соединиться с сайтом средствами JS?

Соединиться с сайтом средствами JS?

Всем хорошего настроения

265