CODEWITHSUNDEEP
javascriptjqueryslick.js
Gags
Gags

Reputation: 3829

Slick : TypeError: b.$slides is null

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.

Upvotes: 17

Views: 18727

Answers (3)

Tarnjeet Singh
Tarnjeet Singh

Reputation: 886

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

Upvotes: 17

konstantin
konstantin

Reputation: 1

       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)

Upvotes: -1

Matoeil
Matoeil

Reputation: 7289

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

Upvotes: 2

Related Questions