슬릭 slick 슬라이더 관련하여 질문 드려요. 도와주세요!

Question

안녕하세요. tab menu 와 슬릭 슬라이더를 사용 중인데요, 도저히 혼자 해결되지 않는 문제가 있어 질문 드려요. HTML 이구,

SHOP BY ARTWORK DESIGN

Pattern
Colours
Characters
Photography
Drwaings
Illustrations
Nature

Image Area

CSS 부분입니다. body{width: 100%; height: 100%; font-size: 20px;} .full_wrap { max-width: 1400px; width: 95%; height: auto; background-color: #E5E5E5; margin: 0 auto; } .full_wrap > div > h5 { text-align: center; font-size: 26px; font-family: 'Montserrat-Bold'; } .by2_cont { width: 1400px; margin: 0 auto; height: auto; padding-top: 50px; } .artwork ul { border: 1px solid red; } .artwork li { font-family: 'Montserrat-Semibold'; list-style: none; float: left; cursor: pointer; text-align: center; font-size: .8rem; } .artwork li:nth-child(n+2) { margin-left: 40px; } .artwork li.on { color: #AE1824; font-weight: bold; } .tab_cont { clear: both; border: 1px solid #dedede; height: auto; background-color: #cecece; } .tab_cont > div { display: none; text-align: center; } .tab_cont div.on { display: block; } .artwork-div { width: 100%; height: 300px; border: 1px solid red; }밑에는 tab menu 탭메뉴 전환과 slider 를 이용한 jquery 부분인데요 , $(document).ready(function() { $(".artwork li").click(function() { var idx = $(this).index(); $(".artwork li").removeClass("on"); $(".artwork li").eq(idx).addClass("on"); $(".tab_cont > div").hide(); $(".tab_cont > div").eq(idx).show(); }) }); $('.artwork-div').slick({ slide: 'div', infinite : true, slidesToShow : 6, slidesToScroll : 1, speed : 300, arrows : true, vertical : false, prevArrow : "", nextArrow : "", dotsClass : "slick-dots", draggable : true, responsive: [ // 반응형 웹 구현 옵션 { breakpoint: 960, //화면 사이즈 960px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:3 } }, { breakpoint: 768, //화면 사이즈 768px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:2 } } ] }); 해당 코드를 크롬에서 열면 처음 보이는 slider 는 정상적으로 보이지만, 위에 ul 중 li 하나를 눌렀을 때는 슬라이드들이 겹칩니다. 살짝 드래그를 했다가 놓으면 다시 정상적으로 펼쳐지는데요, 탭 메뉴 전환했을 때 슬라이드가 겹쳐보이는 문제는 어떻게 해결할 수 있을까요?

관짝 · Accepted Answer

click 이벤트 맨 하단에 $(&#96;.tab_cont > div:eq(${idx}) > div&#96;).slick('setPosition');추가해주시면 될 것 같네요 슬릭 도큐먼트 페이지에서 가져왔어용

조이22 · Answer

헉... 관짝님! 해결 되었어요 .... 이틀 끙끙 앓던 문제였는데 감사합니다

슬릭 slick 슬라이더 관련하여 질문 드려요. 도와주세요!

2개의 답변

Q&A 목록