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

Libeler

This is how you would do it. What is your problem? – Croner

Slider content will be there on desktop version but will not slide, below the 767px will run as a slide. – Libeler

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

Demonstration

See @Tobias Geisler answer's below for a better solution https://mcmap.net/q/789720/-is-it-possible-to-unslick-hide-a-slick-slider-for-desktops-but-slick-show-it-for-mobile-devices – Offal

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

Answer 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.

Querida

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

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 – Mudd

Same as @Mudd if screen size goes smaller when resizing it manually with the desktop browser it does not turn into a slider. Page must be refreshed for the slider to init. But when sizing up (from mobile size to desktop size. It disables the slider. – Referendum

@Referendum i ended up using this and reinit slick on resize with a debounce to not do it too much – Mudd

Answer 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();
    });

Welldisposed

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 @Николай Пушкин – Lyautey

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

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. – Taxonomy

Answer 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
}

Food

Answer 5

Elegant compilation of all answers. Codepen

// setup
var sliderElem = $(".slider"),
    sliderBool = false,
    sliderBreakpoint = 670,
    sliderSettings = {
        arrows: false,
        dots: true,
        autoplaySpeed: 3000,
        mobileFirst: true,
        responsive: [
            {
                breakpoint: sliderBreakpoint,
                settings: "unslick"
            }
        ]
    };
function sliderInit() {
    if (window.innerWidth <= sliderBreakpoint) {
        if (sliderBool == false) {
            sliderElem.slick(sliderSettings);
            sliderBool = true;
        }
    } else {
        sliderBool = false;
    }
}

// resize
$(window).resize(function () {
    sliderInit();
});

Potsherd

Answer 6

Put your code inside a if like below::

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 $('.slider').slick({
     slidesToShow: 5,
     slidesToScroll: 1,
     autoplay: false,
     autoplaySpeed: 2000,
     responsive: [
        {
           breakpoint: 767,
           settings: "unslick"
        }
     ]
  });
}

Take reference from:: link

Gloat

Answer 7

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

Kappenne