How to interact with breakpoint in slick slider?

Question

css

How to properly interact with breakpoint in slick. the slider should not be active on laptops and other large screens, but only active on mobile devices and tablets. Can you please tell me how to do this using the responsive property?

https://codepen.io/kiskiskit/pen/MWowBbW

Answer 1

With the help of responsive, this can hardly be done somehow, but you can limit the script execution depending on the screen size and resize.

function mobileOnlySlider() {
    $(document).ready(function(){
            $('.slider').slick({
                slidesToShow:3,
                slidesToScroll: 1,
                centerMode: true,
                centerPadding: '0px',
                speed: 700,
                infinite: true,
                responsive: [
                    {
                        breakpoint: 576,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
    })
}

if (window.innerWidth >= 768) {
    mobileOnlySlider();
}

$(window).resize(function() {
    if(window.innerWidth >= 768) {
        if($('.slider').hasClass('slick-initialized')) {
            return;
        }
        mobileOnlySlider();
    } else {
        if($('.slider').hasClass('slick-initialized')) {
            $('.slider').slick('unslick');
        } else {
            return;
        }
    }