[swiper] 버튼 하나로 2개의 탭메뉴 슬라이더 제어 방법
본문
swiper 로 위 이미지처럼 탭메뉴1, 탭메뉴2 누르면 내용이 자동슬라이더 되게 하려고 하는데, 문제는 오른쪽에 주황색으로 박스친 버튼은 하나인데 저 하나의 버튼으로 탭메뉴1, 탭메뉴2를 클릭햇을때 나오는 슬라이더 내용을 제어를 해야되는데.. 제어를 할수 잇는 방법이 잇을까요?? (탭메뉴1,탭메뉴2 내용은 같은 슬라이더 클래스를 사용하고 있습니다.)
// html
<div class="title_area line">
<div class="box">
<div class="title">채용정보</div>
<div class="common_tab_area">
<ul class="list">
<li class="on" data-tab="tab07" title="선택됨">
<button type="button" class="btn">기업 채용정보</button>
</li>
<li data-tab="tab08" title="선택되지 않음">
<button type="button" class="btn">인재 인력풀</button>
</li>
</ul>
</div>
</div>
<div class="btn_area">
<div class="navi_area">
<div class="pagination com_3"></div>
</div>
<div class="btn_arrow btn_prev_bottom_l" aria-label="Previous slide"></div>
<div class="btn_arrow btn_autoplay com_3"></div>
<div class="btn_arrow btn_next_bottom_l" aria-label="Next slide"></div>
</div>
</div>
<div id="tab07" class="tab_cont_03 on">
<div class="common_slide sub03"> 슬라이더 내용</div>
</div>
<div id="tab08" class="tab_cont_03">
<div class="common_slide sub03"> 슬라이더 내용</div>
</div>
// 탭메뉴
$('.common_tab_area .list li').on('click', function () {
var tab_id = $(this).attr('data-tab');
$('.common_tab_area .list li').closest('li').attr('title', '선택되지 않음').removeClass('on');
$('.tab_cont_03').removeClass('on');
$(this).closest('li').attr('title', '선택됨').addClass('on');
$("#" + tab_id).addClass('on');
return false;
});
// swiper
var common_slide_03 = new Swiper('.common_slide.sub03', {
autoplay: { delay: 3500, disableOnInteraction: false },
slidesPerView: 1,
slidesOffsetBefore: 0,
spaceBetween: 24,
loopAdditionalSlides: 1,
observer: true,
observeParents: true,
speed: 400,
loop: true,
effect: 'slide',
navigation: {
nextEl: '.btn_next_bottom_l',
prevEl: '.btn_prev_bottom_l',
},
breakpoints: {
767: {
slidesPerView: 2, //브라우저가 1080보다 클 때
},
1280: {
slidesPerView: 3, //브라우저가 1400보다 클 때
},
},
pagination: {
el: ".pagination.com_3",
type: "fraction",
formatFractionCurrent: function (number) {
return ('0' + number).slice(-2);
},
formatFractionTotal: function (number) {
return ('0' + number).slice(-2);
},
renderFraction: function (currentClass, totalClass) {
return '<span class="' + currentClass + '"></span>' + '<b>/</b>' + '<span class="' + totalClass + '"></span>';
}
}
});
$('.btn_autoplay.com_3').click(function () {
if ($(this).hasClass('on')) {
common_slide_03.autoplay.start();
} else {
common_slide_03.autoplay.stop();
}
$(this).toggleClass('on');
})
답변 1
https://ctrlcccv.github.io/ctrlcccv-demo/2023-07-19-swiper-tab/
예제구요
https://ctrlcccv.github.io/code/2023-07-19-swiper-tab/
소스코드입니다.
저 예제 보고 햇는데
pagination: {
el: ".pagination",
type: "fraction",
혹시 저 위에 내용 중복으로 사용 가능한 방법도 알고 계시나요?.?>?
탭 메뉴 누를때마다 슬라이더 수량 숫자가 나와야되는데
같은 .pagination 클래스를 쓰면 안나와서 탭메뉴 마다 pagination 독립적으로 나와야 되는데 어떻게 수정해야될지 .!!ㅜㅠ
두개 다 쓸려면 커스터마이징 하셔야 합니다.
