swiper 탭 메뉴 autoplay 멈춤현상
본문
(위 이미지 현재 구조 상태 )
swiper사용중 막히는 부분이 있어서 문의드립니다.~!!!
슬라이더는 탭메뉴 2, 탭메뉴 3 두개의 탭메뉴안에 들어있고 내용구조는 위에 이미지처럼 되어 있습니다.
tab메뉴 안에 swiper 슬라이더를 넣엇는데 autopaly 기능이 자동으로 안되더라구요. .
탭안에만 넣으면 자동으로 안되고 있습니다. 검색해서 찾아보니까 observer: true, 애네들 넣으면 된다고 하는데 저는 넣어도 작동이 안되더라고요. .^ㅜ^ 혹시 저방법 말고 다른 방법이 있나요? 탭메뉴에 dispaly 때문에 width값을 못불러 온다고 하는데. . 고칠수 있는 방법이 잇는지 요청드립니다.~~! ( 참고로 반응형으로 작업중이라 저 탭메뉴는 모바일 사이즈시 셀렉트 박스로 변경됩니다.!)
<div class="main_conts_02">
<div class="side_tab">
<div class="side_tab_area">
<ul class="list">
<li><a href="#tab04" class="btn">수강생</a></li>
<li><a href="#tab05" class="btn">구인 ·구직자</a></li>
<li><a href="#tab06" class="btn">일반인</a></li>
</ul>
</div>
<div class="sm_select">
<select name="" id="tabmenu">
<option value="#tab04">수강생</option>
<option value="#tab05">구인 ·구직자</option>
<option value="#tab06">일반인</option>
</select>
</div>
</div>
<div id="tab04" class="tab_cont02 on bg_c">내용</div>
<div id="tab05" class="tab_cont02 bg_c2">
<div class="title">기업채용정보</div>
<div class="btn_area">
<div class="navi_area">
<div class="pagination sub01"></div>
</div>
<div class="btn_arrow btn_prev_top" aria-label="Previous slide"></div>
<div class="btn_arrow btn_autoplay sub01"></div>
<div class="btn_arrow btn_next_top" aria-label="Next slide"></div>
</div>
<div id="tab06" class="tab_cont02 bg_c3">슬라이더 내용</div>
//탭메뉴
$('.main_conts_02 .side_tab_area > .list > li').first().addClass("activeClass");
$(".tab_cont_02").not(':first').hide();
$('.main_conts_02 .side_tab_area > .list > li').on('click',function(){
$(this).addClass("activeClass").siblings().removeClass("activeClass");
var link = $(this).find("a").attr("href");
var link_num = link.substr(link.length-1);
$(".sm_select select#tabmenu option").eq(link_num-1).prop("selected", "selected");
$(".tab_cont_02").hide();
$(link).show();
});
$(".sm_select select#tabmenu").on("change",function(){
var select_link = $(".sm_select select#tabmenu").val();
var select_num = $(this).prop('selectedIndex');
$('.main_conts_02 .side_tab_area li').eq(select_num).addClass("activeClass").siblings().removeClass('activeClass');
$(".tab_cont_02").hide();
$(select_link).show();
console.log(select_link);
});
//swiper
var job_slide_02 = new Swiper('.job_slide.sub02', {
autoplay: { delay: 3500, disableOnInteraction: false },
slidesPerView: 1,
slidesOffsetBefore: 0,
spaceBetween: 24,
loopAdditionalSlides: 1,
observer: true,
observeParents: true,
observeSlideChildren: true,
speed: 400,
loop: true,
effect: 'slide',
navigation: {
nextEl: '.btn_next_bottom',
prevEl: '.btn_prev_bottom',
},
breakpoints: {
480: {
slidesPerView: 2, //브라우저가 480보다 클 때
},
1024: {
slidesPerView: 2, //브라우저가 1024보다 클 때
},
1400: {
slidesPerView: 3, //브라우저가 1400보다 클 때
},
},
pagination: {
el: ".pagination.sub02",
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.sub02').click(function () {
if ($(this).hasClass('on')) {
job_slide_02.autoplay.start();
} else {
job_slide_02.autoplay.stop();
}
$(this).toggleClass('on');
})
답변 2
chatgpt 답변입니다.
슬라이더의 자동 재생 기능(autoplay)이 탭 메뉴 내에서 제대로 작동하지 않는 문제는 일반적으로 탭이 숨겨져 있을 때 Swiper가 올바른 너비와 높이를 계산하지 못하기 때문에 발생합니다. Swiper가 올바르게 초기화될 수 있도록, 해당 탭이 활성화될 때 Swiper 인스턴스를 업데이트하는 것이 필요합니다.
다음의 방법을 시도해볼 수 있습니다:
- 탭이 변경될 때
update메소드를 호출하여 Swiper 인스턴스를 갱신합니다. autoplay옵션이 활성화된 상태에서 해당 탭이 보여질 때 자동 재생이 시작되도록 설정합니다.
// 탭이 클릭될 때 Swiper 인스턴스를 업데이트
$('.main_conts_02 .side_tab_area > .list > li').on('click',function(){
// 기존 탭 변경 로직
// ...
// Swiper 업데이트
job_slide_02.update();
job_slide_02.autoplay.start(); // 자동 재생 시작
});
// 셀렉트 박스가 변경될 때 Swiper 인스턴스를 업데이트
$(".sm_select select#tabmenu").on("change",function(){
// 기존 셀렉트 박스 변경 로직
// ...
// Swiper 업데이트
job_slide_02.update();
job_slide_02.autoplay.start(); // 자동 재생 시작
});
위 코드는 사용자가 탭을 클릭하거나 셀렉트 박스를 변경할 때마다 Swiper의 update 메소드를 호출하여 Swiper의 레이아웃을 다시 계산하고 자동 재생을 시작합니다.
또한, Swiper의 autoplay 옵션에 disableOnInteraction: false를 설정하여 사용자 상호작용 후에도 자동 재생이 계속되도록 할 수 있습니다.
이 방법들이 문제를 해결하는 데 도움이 되지 않는다면, CSS의 visibility 속성과 display 속성의 차이점을 이용하여 탭을 숨기는 방식을 조정해볼 수 있습니다. 예를 들어, 비활성 탭을 display: none 대신 visibility: hidden과 position: absolute를 사용하여 화면 밖으로 이동시키는 방법입니다. 이렇게 하면 Swiper가 활성화되지 않은 탭의 크기를 계산할 수 있게 되어 자동 재생에 영향을 덜 미칠 수 있습니다.
저렇게 간단한거엿다니. . 추가하니까 되네용!! 감사합니다.
다음과 같은 방법으로 해보시는건 어떨까 합니다.
1. Swiper를 탭이 활성화 될때 초기화
// 예시: 탭이 활성화될 때 Swiper 초기화
$('.main_conts_02 .side_tab_area > .list > li').on('click', function () {
// ... (기존 코드)
// 탭이 활성화될 때 Swiper를 초기화합니다.
if (link === "#tab06") {
job_slide_02.init();
}
});
2. 탭이 활성화될때 Swiper의 update 메서드 호출
// 예시: 탭이 활성화될 때 Swiper를 업데이트합니다.
$('.main_conts_02 .side_tab_area > .list > li').on('click', function () {
// ... (기존 코드)
// 탭이 활성화될 때 Swiper를 업데이트합니다.
if (link === "#tab06") {
job_slide_02.update();
}
});
답변감사합니다 ~!