Slick : TypeError: b.$slides is null

Question

I am trying to work out why the unslick method isn't working while using responsive breakpoints.

<div id="skills" class="sectionWrapperInner">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

I get error TypeError: b.$slides is null when i am trying to resize the window.

Below is the code for jQuery Slick that i am using

$(document).ready(function(){
     function slickIt(){
          if(!$('.sectionWrapperInner').hasClass('slick-initalized')){
              setTimeout(function(){
                  $('.sectionWrapperInner').slick({
                       responsive: [
                            {
                            breakpoint: 9999,
                            settings: "unslick"
                            },
                            {
                            breakpoint: 1199,
                            settings: {
                                mobileFirst: true,
                                slidesToShow: 4,
                                slidesToScroll: 4,
                                dots: true,
                                focusOnSelect: true,
                                infinte: true,
                            }
                        },
                        {
                            breakpoint: 640,
                            settings: {
                                mobileFirst: true,
                                slidesToShow: 2,
                                slidesToScroll: 2,
                                dots: true,
                                focusOnSelect: true,
                                infinte: true,
                            }
                        },
                       ]
                  });
              },100)
          }
     }
     $(window).bind('resize',function(){
          slickIt();
     });
     slickIt();
});

Any ideas, why i am getting this always on resizing the screen.

Chilpancingo

I am facing same issue, but not getting any solution. I have not called slick slider multiple times, but when I am calling it inside jQuery(window).on('resize', function(){ testFunction(); } it returns me same error. – Somniloquy

Answer 1

Make sure you are not calling slick slider multiple times for one element, or linking the custom code of slick slider multiple times.

Notion

Slick slider code can get called multiple times for same class or for selector, example for slider for images which loads on infinite scroll. how can we tackle that scenario? – Cristie

Answer 2

un uncorrected HTML structure can make it happen too, when a div is not closed for example

Hardwick

Answer 3

       setTimeout(function(){
            $(".product-list-thumbs form .product-image a p").slick('destroy')
        },700)
        setTimeout(function(){
            $(".product-list-thumbs form .product-image a p").slick({
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                dots: true,
                arrows: false
            });
        },1000)

Nyaya

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Steinman