스와이프탭 위젯을 2개 사용하고자 합니다.
본문
<div class="swipe20">
<div class="swiper-container swiper-tab dark-widget widget-head-tab">
<div class="swiper-wrapper">
<div class="swiper-slide active">탭1</div>
<div class="swiper-slide">탭2</div>
<div class="swiper-slide">탭3</div>
</div>
</div>
<div class="swiper-container swiper-body dark-widget">
<div class="swiper-wrapper">
<div class="swiper-slide">
<?php echo na_widget('wr-garo', 'tlist-a', 'thumb_h=210 thumb_w=400 xl=2 lg=2 md=2 sm=2 xs=2'); ?>
</div>
<div class="swiper-slide">
<?php echo na_widget('wr-garo', 'tlist-b', 'thumb_h=210 thumb_w=400 xl=2 lg=2 md=2 sm=2 xs=2'); ?>
</div>
<div class="swiper-slide">
<?php echo na_widget('wr-garo', 'tlist-c', 'thumb_h=210 thumb_w=400 xl=2 lg=2 md=2 sm=2 xs=2') ; ?>
</div>
</div>
</div>
</div>
메인에서 이렇게 출력되고 있고, 해당 스크립트는 아래와 같습니다.
<script>
window.onload = function() {
function setCurrentSlide(ele,index){
$(".swiper-tab .swiper-slide").removeClass("active");
ele.addClass("active");
}
var swiper_tab = new Swiper('.swiper-tab', {
<?php if(!G5_IS_MOBILE) {?>
slidesPerView: 10,
spaceBetween: 10,
<?php } else {?>
slidesPerView: 5,
spaceBetween: 0,
<?php } ?>
paginationClickable: true,
freeMode: true,
loop: false,
onTab:function(swiper){
var n = swiper_tab.clickedIndex;
alert(1);
}
});
swiper_tab.slides.each(function(index,val){
var ele=$(this);
ele.on("click",function(){
setCurrentSlide(ele,index);
swiper_body.slideTo(index, 500, false);
});
});
var swiper_body = new Swiper ('.swiper-body', {
direction: 'horizontal',
loop: false,
autoHeight: true,
spaceBetween: 10,
onSlideChangeEnd: function(swiper){
var n=swiper.activeIndex;
setCurrentSlide($(".swiper-tab .swiper-slide").eq(n),n);
swiper_tab.slideTo(n, 500, false);
}
});
}
</script>
스와이프를 하나 더 쓰려고 아래와 같이 코드 복사하여 붙여넣으면 탭버튼이 동작하질 않네요...
<div class="swipe20">
<div class="swiper-container swiper-tab dark-widget widget-head-tab">
<div class="swiper-wrapper">
<div class="swiper-slide active">탭4</div>
<div class="swiper-slide">탭5</div>
<div class="swiper-slide">탭6</div>
</div>
</div>
<div class="swiper-container swiper-body dark-widget">
<div class="swiper-wrapper">
<div class="swiper-slide">
<?php echo na_widget('wr-garo', 'tlist-d', 'thumb_h=210 thumb_w=400 xl=2 lg=2 md=2 sm=2 xs=2'); ?>
</div>
<div class="swiper-slide">
<?php echo na_widget('wr-garo', 'tlist-e', 'thumb_h=210 thumb_w=400 xl=2 lg=2 md=2 sm=2 xs=2'); ?>
</div>
<div class="swiper-slide">
<?php echo na_widget('wr-garo', 'tlist-f', 'thumb_h=210 thumb_w=400 xl=2 lg=2 md=2 sm=2 xs=2') ; ?>
</div>
</div>
</div>
</div>
어떤 부분 수정해야 중복 사용 가능할까요.
