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

Slider content will be there on desktop version but will not slide, below the 767px will run as a slide. — Shahadat, Mar 28 '17 at 13:47

Tobias Geisler · Answer 1 · 2020-06-29T22:22:22.537

38

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.

edited Jun 29 '20 at 22:22

answered Feb 06 '18 at 11:21

Tobias Geisler

569
4
13

2

still giving me an error on window.resize: `TypeError: b.$slides is null` – Archana Sharma Aug 24 '19 at 06:50

score 23 · Accepted Answer · answered Apr 11 '17 at 04:53

23

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

answered Apr 11 '17 at 04:53

Wenping Guo

622
7
9

2

See @Tobias Geisler answer's below for a better solution https://stackoverflow.com/a/48641847/2815453 – CamelCode Aug 07 '19 at 14:38
`mobilefirst: true` is the key differentiator in the linked answer. – Pixelsmith Apr 26 '21 at 23:46

score 9 · Answer 3 · answered Nov 30 '17 at 13:11

9

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

answered Nov 30 '17 at 13:11

Николай Пушкин

99
1
3

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 @Николай Пушкин – TechYogi Aug 22 '18 at 08:48
still giving me an error on window resize: `TypeError: b.$slides is null` – Archana Sharma Aug 24 '19 at 06:38
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. – gBasgaard Jan 17 '20 at 20:39

score 1 · Answer 4 · answered Oct 12 '17 at 19:00

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
}

score 0 · Answer 5 · answered Mar 28 '17 at 13:38

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

score 0 · Answer 6 · edited Aug 21 '20 at 04:28

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

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

6 Answers6