Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 462
Gags Avatar asked Nov 24 '16 05:11

Gags


2 Answers

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

like image 77
Tarnjeet Singh Avatar answered Oct 15 '22 16:10

Tarnjeet Singh


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

like image 25
Matoeil Avatar answered Oct 15 '22 18:10

Matoeil