탭메뉴인데 슬릭슬라이드로 되는 ..?
본문
안녕하세요 ..평소 스크립트사용을 잘 안하다보니 ..ㅠㅠ부끄럽지만 질문드립니다
제가 탭메뉴인데 슬릭슬라이드를 사용해서 내용을 스와이프할때 탭메뉴가 바뀌거나 탭메뉴클릭했을때 내용이 슬라이드되게 만들고싶은데요
이 스크립트 두개를 조합해서 구현되게 도움 좀 부탁드립니다 ..ㅠㅠ
<!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>
답변을 작성하시기 전에 로그인 해주세요.
