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

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

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

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

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

Copy

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

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

  <title>예제</title>

  <script  src="https://code.jquery.com/jquery-latest.min.js"></script>

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

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

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">

</head>

 

<body>

<!------------------------------------------header---------------------------------------------------------->  

    <header>

        <div class="wrap">

            <div class="tab_menu">

                <ul class="list">

                    <li class="is_on">

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

                    </li>

                    <li>

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

                    </li>

                </ul>

            </div>

          </div>

    </header>

<!------------------------------------------header---------------------------------------------------------->  

 

<!------------------------------------------body---------------------------------------------------------->

     <div class="single-item">

        <div>내용1</div>

         </div>내용2</div>

    </div>

<!------------------------------------------body---------------------------------------------------------->

 

</body>

<script>

 

//슬릭슬라이드

$('.single-item').slick({

  infinite: false

});

 

 

//탭메뉴

const tabList = document.querySelectorAll('.tab_menu .list li');

const contents = document.querySelectorAll('.tab_menu .cont_area .cont')

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

 

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

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

    e.preventDefault();

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

      // 나머지 버튼 클래스 제거

      tabList[j].classList.remove('is_on');

 

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

      contents[j].style.display = 'none';

    }


 

</script>

 

</html>

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

답변 1개

공유하기