[plugin] 반응형 slick 설정시 ".slick-list" padding 없애기

데스크탑에서는 세개씩 보여주고 centerMode: true; 설정을 해둔 슬라이드를,

모바일에서는 하나씩 보여주려한다.

데스크탑 환경에서 세개씩 슬라이드를 보여준다.

 

모바일 환경에서 하나씩 슬라이드를 보여주려하는데 문제가...!

하지만 모바일 환경에서는 이전, 다음 슬라이드가 여전히 보인다...!

소스를 보면 클래스 slick-list에 스크립트 스타일로 패딩이 좌우 잡히기 때문에 보이는 것이다. 

아무리 css로 slick-list width 값을 100%로 해주어도 보일것이다. 

왜일까 계속 디버깅한 결과,

처음 디폴트 데스크탑 옵션에서 centerMode: true;로 설정을 해주었기 때문에 모바일 환경에서는 slidesToShow를 1로 해주고, centerMode: false;로 설정해주어야 다음과 같이 깔끔하게 보인다.

 

체증이 내려가는 시원한 느낌...!

핵심은 slick.js의 옵션인 centerMode에 있었다.