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">구인 &middot;구직자</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">구인 &middot;구직자</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');

        })