slick 반응형에서 제거하기 Uncaught TypeError: Cannot read property 'add' of null” 오류 해결

나의 job에서는 slick 사용한다.. 

 

하하 

반응형 작업할때 

pc에서는 slick 이 반응하고 모바일에서는 제거되게끔 하는 소스를 

구글 검색하다 알아내서 

내가 쓸려고 올리는 포스팅 ~~~

 

 

1 .

var slider = $('.slider');  	
var slickOptions = { 		
    infinite: true, 		
   slidesToShow: 1, 		
   slidesToScroll: 1, 		
   dots:true, 		
   arrows:true 	
  };  	
$(window).on('load resize', function() { 		
    if($(window).width() < 767) { 			
        slider.slick('unslick'); 		
    }else{ 			
        slider.not('.slick-initialized').slick(slickOptions); 		
    } 
});

 

slick으로 반응형 작업하다가 Uncaught TypeError: Cannot read property 'add' of null” 오류 나는게

slick 을 여러번 불러와서 나는거라 .not('.slick-initialized')를 해주면 오류가 안난다,

 

위의 코드가 slick 옵션을 변수에 담고

resize 할때마다 옵션을 불러와주는 방법이다.

 

 

 

 

 

2 .

var slider = $('.slider');     
var timer;    

 $(window).on('load resize',function(){         
    clearTimeout( timer );          
    timer = setTimeout( sliderResponsive(), 100 ); 
})       
function sliderResponsive(){         
    if($(window).width() < 767){             
        slider.filter('.slick-initialized').slick('unslick');         
    }else{             
        slider.not('.slick-initialized').slick({                
            arrows: true,                
            slidesToShow: 1,                 
            slidesToScroll: 1            
        });                         
    }       
}

 

위의 코드는 옵션까지 if문안에 넣어서 

리사이징 할때마다 함수로 불러와주는 방법인데

unslick 할때도 오류가 나서 .slick-initialized 를 unslick 해주는 방법으로 적용했다.

 

작업하다가 오류도 나고해서

구글링 하다가 위의 두가지 방법을 발견했다,

사실 둘다 비슷비슷해서,,하하

옵션넣어서 불러와주는 첫번째코드가 깔끔한거 같다.