@drtvader
Вечный студент

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

Привет!
Как в момент изменения разрешения с 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
  • Вопрос задан
  • 5437 просмотров
Пригласить эксперта
Ответы на вопрос 2
Можно попробовать так
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)
}
Ответ написан
@Eugeny1987
Работаю с HostCMS
slick slider умеет в адаптив
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы