슬라이드에 따라 버튼탭의 클래스가 이동하도록 할 수 있을까요?

Question

안녕하세요, 퍼블리셔입니다~ 프로젝트 진행중에 slick을 사용하게되었는데 아직js가 미숙하다보니 질문드립니다아래 사진처럼 슬라이드에 따라서 빨간 네모박스가 같이 움직여줬으면 좋겠는데.. 방법을 아시는분 계실까요..? 부탁드립니다.. 제가 샘플로 만든 코드펜 링크 첨부드립니다 :)https://codepen.io/young-taek-lee/pen/KKXaaoK?editors&#61;1010

sGPs · Accepted Answer

이렇게 해보면 어떨까요? $('.prd-tab-contents > ol').on('beforeChange', function(event, slick, currentSlide, nextSlide){ $('.prd-tab').find('li').removeClass('on'); $('.prd-tab').find('li').eq(nextSlide).addClass('on'); });

꿈꾸는안씨 · Answer

li에 on을 제이쿼리 addClass 통해서 2번 slick 사진이 나왔을 때 2번째 li 에 addClass on 주고 1번째 li removeClass 해주시면 될 것 같습니다!

TeraGo · Answer

dots: true 화면 밑에 똑같이 1 ~ 4 까지 있네요. 그쪽에 있는걸로 컨트롤하시면됩니다. 번호 넣어주고 싶으면 slisk git 에 상세하게 적혀있어서 참고하시면될꺼같아요. .slick-dots>li.active{ border:1px solid #000; } 간단하게 이렇게?

고양이꼬리 · Answer

dots:flase로 하고싶은데 방법이 없을까요.. ㅠㅠ

EmDev · Answer

이런식으로 해보면 어떨까요? (dots: true 상태에서 dot의 스타일을 CSS로 변경한 것이에요)codepen에서 아래부분처럼 해보시고 확인해보세요 HTML

CSS (최하단에 아래 내용만 추가).slick-slider { padding-top: 2rem; } .slick-dots { position: absolute; top: 0; left: 0; } .slick-dots > li { float: left; } .slick-dots > li + li { margin-left: 0.3rem; } .slick-dots > li > button { cursor: pointer; padding: 0.5rem; } .slick-dots > li.slick-active > button { font-weight: bold; background-color: #77bdfb; } JS$('.prd-tab-contents > ol').slick({ dots: true, arrows: false, speed: 500, slidesToShow: 1, slidesToScroll: 1, infinity: true, autoplay: true, autoplaySpeed: 2000, }); $(".conBox02 .slick-dots > li > button").on("click",function(e){ var slideNo = e.currentTarget.innerHTML; $('.prd-tab-contents > ol').slick('slickGoTo', slideNo - 1); });

고양이꼬리 · Answer

감사합니다 ..! 응용해서 해결했습니다~~ var li_sel2 &#61; $(&#34;.prd-tab-contents > ol > li&#34;).length; $('.prd-tab-contents > ol').slick({ dots: false, arrows: false, speed: 500, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, }); $(&#34;.conBox02 .prd-tab ul&#34;) .on('init', function(event, slick) { $('.conBox02 .prd-tab ul .slick-slide.slick-current').addClass('active'); }) .slick({ slidesToShow:li_sel2, slidesToScroll:li_sel2, speed:0, dots: false, arrows:false, focusOnSelect: false, infinite: false, }) $(&#34;.conBox02 .prd-tab ul li a&#34;).on(&#34;click&#34;,function(e){ var slideNo2 &#61; $('.conBox02 .prd-tab ul li a').index(this); $('.prd-tab-contents > ol').slick('slickGoTo', slideNo2); }); $('.prd-tab-contents > ol').on('afterChange', function(event, slick, currentSlide) { $('.conBox02 .prd-tab ul').slick('slickGoTo', currentSlide); var currrentNavSlideElem2 &#61; '.conBox02 .prd-tab ul .slick-slide[data-slick-index&#61;&#34;' &#43; currentSlide &#43; '&#34;]'; $('.conBox02 .prd-tab ul .slick-slide.on').removeClass('on'); $(currrentNavSlideElem2).addClass('on'); }); $('.conBox02 .prd-tab ul').on('click', '.slick-slide', function(event) { event.preventDefault(); var goToSingleSlide2 &#61; $(this).data('slick-index'); $('.prd-tab-contents > ol').slick('slickGoTo', goToSingleSlide2); });

슬라이드에 따라 버튼탭의 클래스가 이동하도록 할 수 있을까요?

6개의 답변

Q&A 목록