[swiper] 버튼 하나로 2개의 탭메뉴 슬라이더 제어 방법

[swiper] 버튼 하나로 2개의 탭메뉴 슬라이더 제어 방법

QA

[swiper] 버튼 하나로 2개의 탭메뉴 슬라이더 제어 방법

본문

237078693_1704182421.8353.jpg

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 독립적으로 나와야 되는데 어떻게 수정해야될지 .!!ㅜㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 94
QA 내용 검색

회원로그인

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