Slick: How to make it working on mobile only?

[allainna]

I'd like the slider to be working on mobile only.
I created a new slider with mobileFirst: true and responsive: [{breakpoint: 768, settings: "unslick"}]. But it didn't help.

[ahmadalfy]

If you want it to work only on mobile then you should initialize it only on small screen by checking the screen size then deciding whether to run slick or not. It should be something like the following:

if (window.matchMedia("(max-width: 768px)").matches) {
  /* the viewport is less than 768 pixels wide */
  $('.slider').slick();
} 

[allainna]

Thanks for your reply.
How to make it working on resize? When I open it on a big screen and then resize the window the slider doesn't work.

[rijosh]

just wright the slider as function and call it in corresponding resolution, then window resize function destroy or reinitialize.

//////////////////////////////

function mobileOnlySlider() {
$('.slider').slick({
autoplay: false,
speed: 1000,
autoplaySpeed: 5000
});
}
if(window.innerWidth < 768) {
mobileOnlySlider();
}

$(window).resize(function(e){
    if(window.innerWidth < 768) {
        if(!$('.slider').hasClass('slick-initialized')){
            mobileOnlySlider();
        }

    }else{
        if($('.slider').hasClass('slick-initialized')){
            $('.slider').slick('unslick');
        }
    }
});

//////////////////

[mau5ken]

Yo will need a Sass to only show it on small devices

[bkingg]

This will trigger slick on screens below 768px only

$('.carousel').slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    mobileFirst: true,
    responsive: [
          {
                  breakpoint: 768,
                  settings: 'unslick'
          }
    ]
  });

[Mattomanka]

@bkingg I tried your code, but it still doesn't work. If you load page in mobile, then resize browser to desktop and after that will again resize to mobile, it will stay in desktop version without slider.
Of course, I can use resize event, but it looks like a dirty solution for me.

[bkingg]

@Mattomanka Use this instead

$(function(){ /* Slick needs no get Reinitialized on window Resize after it was destroyed */ $(window).on('load resize orientationchange', function() { $('.carousel').each(function(){ var $carousel = $(this); /* Initializes a slick carousel only on mobile screens */ // slick on mobile if ($(window).width() > 768) { if ($carousel.hasClass('slick-initialized')) { $carousel.slick('unslick'); } } else{ if (!$carousel.hasClass('slick-initialized')) { $carousel.slick({ slidesToShow: 2, slidesToScroll: 1, mobileFirst: true, }); } } }); }); });

[kristina3531]

Breakpoints do not work correctly in Chrome, Opera, Microsoft edge, only in Mozilla work correctly.
$(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
}
}
]
});
}
}
});
});

What's wrong?

[Semaho]

Great solution by @bkingg but I would recommend using $(window).outerWidth() instead as your breakpoint will react to this one.

(If you have a scrollbar, width() may return window width minus scrollbar width.

[milijanadjeric]

@Mattomanka Use this instead

    /* Slick needs no get Reinitialized on window Resize after it was destroyed */
    $(window).on('load resize orientationchange', function() {
        $('.carousel').each(function(){
            var $carousel = $(this);
            /* Initializes a slick carousel only on mobile screens */
            // slick on mobile
            if ($(window).width() > 768) {
                if ($carousel.hasClass('slick-initialized')) {
                    $carousel.slick('unslick');
                }
            }
            else{
                if (!$carousel.hasClass('slick-initialized')) {
                    $carousel.slick({
                        slidesToShow: 2,
                        slidesToScroll: 1,
                        mobileFirst: true,
                    });
                }
            }
        });
    });
});```

this solved my problem! thank you very much !!