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

Question

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 1

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
                }
        }
    ]
});

Solution 2

Much cleaner solution than the currently accepted answer: Add the mobileFirst: true, option:

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

This will interpret your breakpoint settings starting from low resolutions, as intended.

See the settings section in the Slick documentation.

Solution 3

Unfortunately my version of #user1506075 did not work without errors. I solved the problem this way:

 $slickGreen = false;
    function greenSlider(){    
        if($(window).width() < 991){
            if(!$slickGreen){
                $(".greenSlider").slick({
                    dots: false,
                    arrows: false,
                    slidesToShow: 3,
                    slidesToScroll: 1
                });
                $slickGreen = true;
            }
        } else if($(window).width() > 992){
            if($slickGreen){
                $('.greenSlider').slick('unslick');
                $slickGreen = false;
            }
        }
    };

    $(document).ready(function(){
        ....
        greenSlider();
    });
    $(window).on('resize', function(){
         ....
         greenSlider();
    });

Solution 4

I had a similar problem and solved it with enquire.js (lightweight - around 0.8kb, pure JavaScript library for responding to CSS media queries)

Based on the discussion in this GitHub thread and this comment particularly, I implemented the solution using enquire.js like so:

$slider = $('#your-slider');

enquire.register('screen and (max-width: 767px)', {
  match : function() {
    if ( !$slider.hasClass('slick-initialized') ) {
      $slider.slick(SliderSettings);
    }
  }, 
  unmatch : function() {
    if ( $slider.hasClass('slick-initialized') ) {
      $slider.slick('unslick');
    }
  }
});

Where SliderSettings is options map, like in your case:

{
 slidesToShow: 5,
 slidesToScroll: 1,
 autoplay: false,
 autoplaySpeed: 2000
}

View more solutions

Comments

[TechYogi]

This works best for me, as accepted solution doesn't work for certain situations. If we set breakpoints at "767" and unslick it above that, and suppose device width is 375x812. After changing the orientation to landscape (>767) we "unslick" it, and again on change of orientation to portrait (<767), slider doesn't work. Thanks @Николай Пушкин

[CamelCode]

See @Tobias Geisler answer's below for a better solution stackoverflow.com/a/48641847/2815453

[Archana Sharma]

still giving me an error on window resize: TypeError: b.$slides is null

[Archana Sharma]

still giving me an error on window.resize: TypeError: b.$slides is null

[gBasgaard]

This should be the selected answer in my opinion. It's the only one that accounts for screen size changes dynamically. Say you want the slider to still function for mobile/smaller screens and you resize back and forth between slicked/unslicked.

[Pixelsmith]

mobilefirst: true is the key differentiator in the linked answer.

[BritishSam]

good answer, only problem is if screen goes smaller to where it should be a slider it doesn't turn into a slider, this could happen on rotating a phone etc