[Swiper] 스와이퍼 한 페이지에 여러개 사용하기. Multiple Swiper

이전 게시글

[Swiper] 스와이퍼 오류 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'E

 

 

호출부분

<div class="container">
    <div th:replace="fragments/slider :: slider('CATEGORY', 'swiperA')"></div>
    <div th:replace="fragments/slider :: slider('CATEGORY222', 'swiperB')"></div>
</div>

 

fragment 지정부분

<div class="mt-5" th:fragment="slider(title, swiperName)">
    <h3 style="font-weight:bold;" th:text="${title}"></h3>
    <div class="swiper-cover">
        <!-- Slider main container -->
        <div class="swiper " th:id="${swiperName}">  //⭐ID명 동적으로 가져옴
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <th:block th:each="num : ${#numbers.sequence(1,10)}">
                <!--/* 컬렉션 없이 단순 반복문처리 : ${#numbers.sequence(from,to,step)} */-->
                    <div class="swiper-slide">
                        <div class="col">
                            <div class="card shadow-sm">
                                <img src="https://plchldr.co/i/245x180" alt="plchldr.co" class="swiper-lazy">
                                <div class="card-body">
                                    <p class="card-text" style="text-align:left;">
                                        <span th:text="'책제목'+${num}"></span> <br>
                                        <span>최상급</span> <br>
                                        <span>10000원</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </th:block>
            </div>
        </div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev-custom " th:id="prev_+${swiperName}"> //⭐ID명 동적으로 가져옴
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
                <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
            </svg>
        </div>
        <div class="swiper-button-next-custom " th:id="next_+${swiperName}"> //⭐ID명 동적으로 가져옴
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
                <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
            </svg>
        </div>

    </div>
</div>

swiper-button-next-custom은 버튼을 외부로 빼기위해 css 적용한 것이다.

 

 var Swipers = [];
 $('.swiper').each(function(i) {
   var thisID = $(this).attr('id'); //아이디 가져오기

   Swipers[i] = new Swiper('#'+thisID, {	//⭐아이디 설정
        loop: true,
        navigation: {
            nextEl: '#next_'+thisID,   //⭐버튼 설정
            prevEl: '#prev_'+thisID,   //⭐버튼 설정
        },
        lazy : {
            loadPrevNext : true // 이전, 다음 이미지는 미리 로딩
        },
       breakpoints: {
           320: {  slidesPerView: 2,  spaceBetween: 10,  },
           500: {  slidesPerView: 3,  spaceBetween: 10,  },
           768: {  slidesPerView: 4,  spaceBetween: 10,  },
           1024: { slidesPerView: 5,  spaceBetween: 10,  },
       }
   });
 });

완성!