How to reinitialize slick slider at resize moment?

Question

JavaScript

Hey!
How to reinitialize the slick at the time of changing the resolution from 960 to 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

You can try like this

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)
}

Answer 2

slick slider can adapt