탭메뉴인데 슬릭슬라이드로 되는 ..?

안녕하세요 ..평소 스크립트사용을 잘 안하다보니 ..ㅠㅠ부끄럽지만 질문드립니다

제가 탭메뉴인데 슬릭슬라이드를 사용해서 내용을 스와이프할때 탭메뉴가 바뀌거나 탭메뉴클릭했을때 내용이 슬라이드되게 만들고싶은데요

이 스크립트 두개를 조합해서 구현되게 도움 좀 부탁드립니다 ..ㅠㅠ

</p>

<p><!DOCTYPE html></p>

<p><html></p>

<p><head></p>

<p>  <meta charset="utf-8"></p>

<p>  <meta name="viewport" content="width=device-width, initial-scale=1"></p>

<p>  <title>예제</title></p>

<p>  <script  src="<a href="https://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-latest.min.js"></script></a></p>

<p>    <!-- slick불러오기 --></p>

<p>    <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script></a></p>

<p>    <link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"></a></p>

<p>    <link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"></a></p>

<p></head></p>

<p> </p>

<p><body></p>

<p><!------------------------------------------header---------------------------------------------------------->  </p>

<p>    <header></p>

<p>        <div class="wrap"></p>

<p>            <div class="tab_menu"></p>

<p>                <ul class="list"></p>

<p>                    <li class="is_on"></p>

<p>                    <a href="#tab1" class="btn">탭1</a></p>

<p>                    </li></p>

<p>                    <li></p>

<p>                    <a href="#tab2" class="btn">탭2</a></p>

<p>                    </li></p>

<p>                </ul></p>

<p>            </div></p>

<p>          </div></p>

<p>    </header></p>

<p><!------------------------------------------header---------------------------------------------------------->  </p>

<p> </p>

<p><!------------------------------------------body----------------------------------------------------------></p>

<p>     <div class="single-item"></p>

<p>        <div>내용1</div></p>

<p>         </div>내용2</div></p>

<p>    </div></p>

<p><!------------------------------------------body----------------------------------------------------------></p>

<p> </p>

<p></body></p>

<p><script></p>

<p> </p>

<p>//슬릭슬라이드</p>

<p>$('.single-item').slick({</p>

<p>  infinite: false</p>

<p>});</p>

<p> </p>

<p> </p>

<p>//탭메뉴</p>

<p>const tabList = document.querySelectorAll('.tab_menu .list li');</p>

<p>const contents = document.querySelectorAll('.tab_menu .cont_area .cont')</p>

<p>let activeCont = ''; // 현재 활성화 된 컨텐츠 (기본:#tab1 활성화)</p>

<p> </p>

<p>for(var i = 0; i < tabList.length; i++){</p>

<p>  tabList[i].querySelector('.btn').addEventListener('click', function(e){</p>

<p>    e.preventDefault();</p>

<p>    for(var j = 0; j < tabList.length; j++){</p>

<p>      // 나머지 버튼 클래스 제거</p>

<p>      tabList[j].classList.remove('is_on');</p>

<p> </p>

<p>      // 나머지 컨텐츠 display:none 처리</p>

<p>      contents[j].style.display = 'none';</p>

<p>    }</p>

<p>

 </p>

<p></script></p>

<p> </p>

<p></html></p>

<p> </p>

<p>

탭메뉴인데 슬릭슬라이드로 되는 ..? 채택완료

답변 1개

탭메뉴인데 슬릭슬라이드로 되는 ..? 채택완료

답변 1개

공유하기