(HTML/CSS/jQuery) 탭메뉴 안에 각각 slick 슬라이더 넣기

slick.js

See the Pen tab menu slick 자체 코드 by kimyangsun (@kimyangsun) on CodePen.

https://codepen.io/kimyangsun/pen/jOPerPR?editors=1010

tab menu slick 자체 코드

탭메뉴를 제이쿼리로 만들어서 그 안에 각각 다른 slick 슬라이더를 넣는경우에 탭메뉴를 클릭하면

 

탭메뉴가 display : none 에서 display : block 으로 될텐데 이때 slick 슬라이더의 너비와 높이가 지정되지 않는

 

오류가 생긴다.

 

이 경우에 slick이 첫페이지에 있지 않으면 slick의 첫번째 이미지가 보이지 않고 2번째 부터 도는것을 확인 할 수 있다. 해당 문제는 탭이 active가 된 후 그 페이지에 slick이 있다면 = slick의 위치를 수동으로 새로 고쳐줘야 한다.