swiper 탭 메뉴 autoplay 멈춤현상

swiper 탭 메뉴 autoplay 멈춤현상

QA

swiper 탭 메뉴 autoplay 멈춤현상

본문

237078693_1704158984.202.jpg

(위 이미지 현재 구조 상태 )

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 인스턴스를 업데이트하는 것이 필요합니다.

다음의 방법을 시도해볼 수 있습니다:

  1. 탭이 변경될 때 update 메소드를 호출하여 Swiper 인스턴스를 갱신합니다.
  2. 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: hiddenposition: 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();
    }
});
답변을 작성하시기 전에 로그인 해주세요.
전체 124,114 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT