Как реинициализировать slick slider в момент resize?

Question

[drtvader]

Привет!
Как в момент изменения разрешения с 960 на 959 сделать реинициализацию слика?

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


    function initSlick() {
        if(width < 960) {
            $slick.slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                infinite: false,
                mobileFirst: true,
                arrows: false,
                variableWidth: true,
                responsive: [
                    {
                        breakpoint: 599,
                        settings: {
                            slidesToShow: 2
                        }
                    }
                ]
            });
        } else {
            $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() {
        $('.js-slider-gift').slick('resize');
    });

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

jsfiddle.net

Answer 1

[Александр]

Можно попробовать так

var $slick = $('.js-slider-gift'),
    optionsDefault = {
        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,
                }
            }
        ]
    },
    optionsMin = {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: false,
        mobileFirst: true,
        arrows: false,
        variableWidth: true,
        responsive: [
            {
                breakpoint: 599,
                settings: {
                    slidesToShow: 2
                }
            }
        ]
    };

$(document).ready(function() {
    $slick.slick();
    setOptionsSlider();
});

$(window).resize(function () {
    setOptionsSlider();
});

function setOptionsSlider() {
    var width = window.innerWidth || document.body.clientWidth,
        options;
    options = width < 960 ? optionsMin : optionsDefault;
    $slick.slick('slickSetOption', options)
}

Comments

[drtvader]

нет, ругается на setOptionsSlider

[Александр]

drtvader: о блин... забыл функцию добавить)))
function setOptionsSlider() {
var width = window.innerWidth || document.body.clientWidth,
options;
options = width < 960 ? optionsMin : optionsDefault;
$slick.slickSetOption(options);
}

[drtvader]

lebonnet: теперь на эту строку $slick.slickSetOption(options); :)

[Александр]

drtvader: может быть так $slick.slick('slickSetOption', options)

[drtvader]

lebonnet: $slick.slickSetOption is not a function

[drtvader]

lebonnet: jQuery.Deferred exception: $slick.slickSetOption is not a function TypeError: $slick.slickSetOption is not a function и вот такое еще

[LittleFatNinja]

drtvader: ебись сам

[Александр]

короче тут https://jsfiddle.net/srq6sxva/2/ все робит, смотрите умеете ли вы подключать скрипты

[drtvader]

lebonnet: понял, вижу что работает. Сейчас ошибки нет, но и не работает как необходимо. Т.е. после перехода не делает 2 строки согласно опции rows. Буду еще думать как быть.

Answer 2

[Евгений]

slick slider умеет в адаптив

Comments

[drtvader]

умеет, но с rows почему то не перестаривается как надо, и ломает просто верстку, раскидывая блоки как вздумается.