Search code examples
jquerysliderslick.js

Is it possible to unslick/hide a Slick slider for desktops but slick/show it for mobile devices?


How can I disable a slider for desktop resolutions but display it on mobile devices? The following code allows only for the opposite:

$('.slider').slick({
     slidesToShow: 5,
     slidesToScroll: 1,
     autoplay: false,
     autoplaySpeed: 2000,
     responsive: [
        {
           breakpoint: 767,
           settings: "unslick"
        }
     ]
  });

Solution

  • Try this: screen width 9999px to 768px will not be slider

    ('.slider').slick({
        slidesToShow: 5,
        slidesToScroll: 1,
        autoplay: false,
        autoplaySpeed: 2000,
        responsive: [
            {
                breakpoint: 9999,
                settings: "unslick"
            },
            {
                breakpoint: 767,
                 settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        infinite: true,
                        dots: true
                    }
            }
        ]
    });