탭 메뉴 롤링 질문입니다 ㅠ
본문
쇼핑몰 메인 화면에서 탭메뉴로 카테고리 별 상품을 보여주고 있는데
처음 기획단계에서 자동 롤링 기능이 없어서 해당 사항을 고려하지 않고 짰는데
갑자기 자동 롤링이 필요하다고 하네요..;;
저러 소스들을 찾아보고 적용해보려고 하였는데 어떤 이유인지 잘되지 않아서
지금 사용하는 소스에 자동 롤링을 어떻게 추가하면 될지 질문 드리고 싶습니다 ㅠㅠ
<div id="main_tab">
<ul class="tab_tit">
<li><button type="button" rel="#tab_1" class="selected">시계</button></li>
<li><button type="button" rel="#tab_2">가방</button></li>
<li><button type="button" rel="#tab_3">지갑</button></li>
<li><button type="button" rel="#tab_4">신발</button></li>
</ul>
<ul class="tab_con">
<li id="tab_1"><div>내용</div></li>
<li id="tab_2"><div>내용</div></li>
<li id="tab_3"><div>내용</div></li>
<li id="tab_4"><div>내용</div></li>
</ul>
</div>
<script>
$(function (){
$(".tab_con>li").hide();
$(".tab_con>li:first").show();
$(".tab_tit li button").click(function(){
$(".tab_tit li button").removeClass("selected");
$(this).addClass("selected");
$(".tab_con>li").hide();
$($(this).attr("rel")).show();
});
});
</script>
답변 2
몇초마다 자동으로 슬라이드 되는 그런거 말씀하시는 건가요?
직접 구현하기는 어려울거같은데 swiperjs같은걸 적용해보세요
var move;
move = setInterval(function(){
$(".tab_tit li").removeClass("selected");
$(".tab_tit li").eq(current).addClass("selected");
$(".tab_con>li").hide();
$(".tab_con>li").eq(current).show();
current++;
if(current==$(".tab_tit li").size()){current=0};
},500);
이런식으로 롤링시키시고~! 클릭후에는 인덱스번호를 치환받으시는걸로 작성하시면 될거같네요 ~
* 저는 select 클래스를 li 로 옮겨서 작업하였습니다~
답변을 작성하시기 전에 로그인 해주세요.