Некорректно работает responsive в slick-slider в chrome и opera?

Question

[Qurel]

Задала брейкпойт 768px чтобы показывалось 2 слайдера, но это срабатывает при разрешении экрана 687px.

$(document).ready(function () {
  sertificatesSlider();
});
var sertificatesSlider = function() {
    if($(window).width() < 992) {
        $('.sertificates-slider').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            dots: false,
            prevArrow: '.sertificates__btn--prev',
            nextArrow: '.sertificates__btn--next',
            responsive: [
                {
                  breakpoint: 768,
                  settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                  }
                }]
        });
    } 
    
    else {
        $('.sertificates-slider').slick('unslick');
    }
};
var sertificatesSlider = function() {

    var sliderElement = $('.sertificates-slider');

    if($(window).width() < 992 && !(sliderElement.hasClass('slick-initialized'))) {
        sliderElement.slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            dots: false,
            prevArrow: '.sertificates__btn--prev',
            nextArrow: '.sertificates__btn--next',
            responsive: [
                {
                  breakpoint: 768,
                  settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                  }
                }]
            
        });
    } else if ($(window).width() > 992 && sliderElement.hasClass('slick-initialized')) {
        sliderElement.slick('unslick');
    }
};
$(window).on('resize', function() {
    sertificatesSlider();
});

Comments

[Qurel]

Пофиксилось в Chrome и Opera при mobileFirst: true, сломалось в Microsoft Edge и Firefox

[Qurel]

Помогите настроить, в Опере, Xроме и Microsoft Edge неправильно работают брейкпойнты, только в Мозилле все четко. Поменяла код:

/* Slick needs no get Reinitialized on window Resize after it was destroyed */
     $(window).on('load resize orientationchange', function() {
        $('.sertificates-slider').each(function(){
            var $carousel = $(this);
            /* Initializes a slick carousel only on mobile screens */
            // slick on mobile
            if ($(window).width() > 991) {
                if ($carousel.hasClass('slick-initialized')) {
                    $carousel.slick('unslick');
                }
            }
            else{
                if (!$carousel.hasClass('slick-initialized')) {
                    $carousel.slick({
                        slidesToShow: 3,
                        slidesToScroll: 1,
                        // mobileFirst: true,
                        nextArrow: '.sertificates__btn--next',
                        prevArrow: '.sertificates__btn--prev',
                        responsive: [
                            {
                              breakpoint: 768,
                              settings: {
                                slidesToShow: 2,
                                lidesToScroll: 1
                              }
                            },
                            {
                              breakpoint: 576,
                              settings: {
                                slidesToShow: 1
                              }
                            }
                        ]
                    });
                }
            }
        });
    });

https://kristina3531.github.io/MatroLuxe/

Answer 1

[Serg Bakay]

с unslick слабо задокументировано там сам шишек набивал вот как им пользоваться:

Comments

[Qurel]

Не знаю почему, через какое-то время все нормально заработало, только убрала mobileFirst: true