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');

        })