[Swiper.js] 멀티 슬라이더 외부 pagination과 navigation 잡기

swiper 기본 특성 상 swiper-slider 안에 pagination 과 navigation이 존재하며 기본적으로 슬라이더 안의 있는 리모트(pagination 과 navigation)들을 인식하게 된다. 

 

디자인에서 pagination 과 navigation이 대상 슬라이더 밖에 존재해야할 UI가 있을 때 독립적인 하나의 슬라이더만 존재하면 문제가 되지 않다.

하지만 이와 같은 두개이상의 슬라이더가 있을 때 리모트는 정상 작동이 되지 않는다. 

따라서 약간의 스크립트 수정이 필요하다.

 

HTML

<div class="notice__slider-frame">
    <div class="swiper notice__slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="swiper-slide__inner">
                    <div class="flex-box justify">
                        <div class="box-middle__top--item">
                            <span class="board-num__square">상시제</span>										
                            <span class="board-num__square-green">이러닝</span>
                        </div>
                        <div class="box-middle__top--item">
                            <span class="state__blue">모집중</span>
                        </div>
                    </div>
                    <div class="box-middle__center">
                        <p class="cm-title-sub">자격교육(직업능력개발훈련교사)</p>
                        <a href="javascript:;" class="txt--m4 word-line-single">기업현장교사 심화과정 [1단계] 온라인교육 (21시간) [2022-1]차</a>
                    </div>
                    <div class="box-middle__bottom">
                        <ul class="list-table">
                            <li>
                                <dl class="list-definition">
                                    <dt>접수기간</dt>
                                    <dd>상시</dd>
                                </dl>
                            </li>
                            <li>
                                <dl class="list-definition">
                                    <dt>신청인원</dt>
                                    <dd><span class="gray-color--900">112</span> / 9,999</dd>
                                </dl>
                            </li>
                        </ul>
                        <ul class="list-table">
                            <li>
                                <dl class="list-definition">
                                    <dt>교육기간</dt>
                                    <dd>2022.01.01 ~ 2022.05.21</dd>
                                </dl>
                            </li>
                            <li>
                                <dl class="list-definition">
                                    <dt>교육시간</dt>
                                    <dd>온라인 21시간</dd>
                                </dl>
                            </li>
                            <li>
                                <dl class="list-definition">
                                    <dt>지역</dt>
                                    <dd>서울</dd>
                                </dl>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="swiper-slide__inner">
                    <div class="flex-box justify">
                        <div class="box-middle__top--item">
                            <span class="board-num__square">상시제</span>										
                            <span class="board-num__square-green">이러닝</span>
                        </div>
                        <div class="box-middle__top--item">
                            <span class="state__blue">모집중</span>
                        </div>
                    </div>
                    <div class="box-middle__center">
                        <p class="cm-title-sub">자격교육(직업능력개발훈련교사)</p>
                        <a href="javascript:;" class="txt--m4 word-line-single">기업현장교사 심화과정 [1단계] 온라인교육 (21시간) [2022-1]차</a>
                    </div>
                    <div class="box-middle__bottom">
                        <ul class="list-table">
                            <li>
                                <dl class="list-definition">
                                    <dt>접수기간</dt>
                                    <dd>상시</dd>
                                </dl>
                            </li>
                            <li>
                                <dl class="list-definition">
                                    <dt>신청인원</dt>
                                    <dd><span class="gray-color--900">112</span> / 9,999</dd>
                                </dl>
                            </li>
                        </ul>
                        <ul class="list-table">
                            <li>
                                <dl class="list-definition">
                                    <dt>교육기간</dt>
                                    <dd>2022.01.01 ~ 2022.05.21</dd>
                                </dl>
                            </li>
                            <li>
                                <dl class="list-definition">
                                    <dt>교육시간</dt>
                                    <dd>온라인 21시간</dd>
                                </dl>
                            </li>
                            <li>
                                <dl class="list-definition">
                                    <dt>지역</dt>
                                    <dd>서울</dd>
                                </dl>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fraction-remote">
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>	
        <div class="swiper-button-next"></div>
    </div>
</div>

Javascript

다수의 슬라이더 갯수만큼 each문을 돌려 각각의 리모트들에게 해당 인덱스를 부여하여 type+i 와 같은 고유 번호를 붙여준후, pagination과 navigation 클래스를 지정할 때 고유 번호를 함께 붙여주면 각각 슬라이더 별로 독립적으로 정상 작동하는 것을 볼 수 있다.

var $multiSlider = $('.notice__slider-frame');
$multiSlider.find('.notice__slider').each(function(i){
    $(this).siblings(".fraction-remote").find(".swiper-pagination").addClass("type"+i);
    $(this).siblings(".fraction-remote").find("[class^='swiper-button']").addClass("type"+i);
    var slider  = new Swiper($(this), {
        slidesPerView: 1,
        loop: true,
        observer: true,
        observeParents: true,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false
        },
        pagination: {
            el: $(this).siblings(".fraction-remote").find(".swiper-pagination.type"+i),
            type: 'fraction'
        },
        navigation: {
            nextEl: $(this).siblings(".fraction-remote").find(".swiper-button-next.type"+i),
            prevEl: $(this).siblings(".fraction-remote").find(".swiper-button-prev.type"+i)
        }
    });
});

만약, 다수의 슬라이더의 슬라이드 지연 속도를 다르게 하고싶다면 인덱스를 가지고 아래와 같이 응용할 수 있다

(여기서 i 가 number라는 것을 콘솔로그를 통해 확인함 console.log(typeof i); )

autoplay: {
    delay: (i+1)*2000, 
    disableOnInteraction: false
},