slick: Can't destroy slick - unslick function returns error

Not sure if anyone is still looking at this but I was stuck on it for an hour. I realised I have either read the way you call methods wrong or it’s changed.

Instead of carousel.unslick(); you should use carousel.slick("unslick");

In my case I needed to destroy slick at a certain window size. This worked for me:

var $carousel = $('.carousel');

if (breakpoint === 'mobile') {
  if($carousel.hasClass('slick-initialized')) {
    $carousel.unslick();
  }
  $carousel.slick();
} else {
  $carousel.unslick();
}

           var $carousel = $('#wrapper-tab-mobile');
           function showSliderScreen($widthScreen) {
               console.log($widthScreen);

               if ($widthScreen <= "890") {
                   if (!$carousel.hasClass('slick-initialized')) {
                       $carousel.slick({
                           slidesToShow: 5,
                           slidesToScroll: 1,
                           infinite: false,
                           arrows: false,
                           focusOnSelect: true,responsive: [
                            {
                                breakpoint: 768,
                                settings: {
                                    centerPadding: '40px',
                                    slidesToShow: 3
                                }
                            },
                           {
                               breakpoint: 480,
                               settings: {
                                   slidesToShow: 2
                               }
                           }]
                       });
                   }

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

           var widthScreen = $(window).width();
           $(window).ready(showSliderScreen(widthScreen)).resize(
               function () {
                   var widthScreen = $(window).width();
                   showSliderScreen(widthScreen);
               }
           );

Me too. For me works this:

var $slider = $('.slider').slick();
$slider.slick('getSlick').reinit();

Similar to @simonkitson I was calling the slick/unslick function on each resize so the function attempting to recreate the slider prevented the sliders removal.

My addition to @wtran is as follows:

    var $carousel = $('.element_class');

    // console.log( $(window).width() + '>' + commonBreakpoint );

    if ( $(window).width()  >= commonBreakpoint) { 

        // console.log('unslick');

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

    } else {

        // console.log('slick');

        if(!$carousel.hasClass('slick-initialized')) {

            $carousel.slick({
                dots: true,
                arrows: false,
                infinite: false,
                speed: 100,
                slidesToShow: 1,
                slidesToScroll: 1
            });
        }

    }

@kenwheeler : I am getting error in IE 9 console because of unslick . *when doing $(‘.responsive’).slick(‘unslick’); getting error - *

Unable to get value of the property ‘unslick’: object is null or undefined

*when doing $(‘.responsive’).unslick(); getting error - *

Object doesn’t support property or method ‘unslick’ please provide the solution.

@inferusvv, for me too, but new slick dots added every time when using this code (i need to restore slick width on bootstrap tabs change event).

For me works this code: $slider.slick(‘unslick’).slick(…);

where … - slick settings varaible.

@nathanaelphilip try using @flesch91’s technique. check for the ‘slick-initialized’ class before calling unslick. The carousel is performing a kind of “init” on resizing and is temporarily unavailable. If you call unslick during that time, you get that error.

Yeah, calling methods was recently changed: https://github.com/kenwheeler/slick/releases/tag/1.4.0