언어/JavaScript
[Swiper] 스와이퍼 여러 개를 설정해보자 multiple swiper
홍시_코딩기록
2024. 7. 3. 23:02
기존 스와이퍼 설정
const studentGroupSlide = new Swiper('.swiper-container', {
slidesPerView: "auto",
spaceBetween: 0,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
하지만 나는 슬라이드가 여러개고 같은 슬라이드라 설정을 여러번 해주고 싶지 않다.
.swiper-container 를 querySelectorAll로 선언해서 반복문으로 설정해봤지만 실패!
방법을 찾다가 발견했다.
멀티 스와이퍼 설정
const swiper = document.querySelectorAll(".swiper-container");
const pagination = document.querySelectorAll(".swiper-pagination");
const prev = document.querySelectorAll(".swiper-button-prev");
const next = document.querySelectorAll(".swiper-button-next");
for (let i = 0; i < 2; i++) {
swiper[i].classList.add("swiper-" + i);
pagination[i].classList.add("swiper-pagination-" + i);
prev[i].classList.add("swiper-prev-" + i);
next[i].classList.add("swiper-next-" + i);
const swiperClass = new Swiper(".swiper-" + i, {
slidesPerView: 4,
spaceBetween: 24,
pagination: {
el: ".swiper-pagination-" + i,
clickable: true
},
navigation: {
nextEl: ".swiper-button-next-" + i,
prevEl: ".swiper-button-prev-" + i
},
});
}
출처에서는 html에 swiper-0~.. 클래스를 직접 추가했는데
코드에 클래스 추가하는 반복문이 있으니까 굳이 추가 X
이렇게 설정하니 슬라이드 여러 개가 잘 작동한다.
하지만 나는 슬라이드가 탭 안에 있어서 탭을 이동하면 또 스와이퍼가 잘 작동하지 않는다.
.tab_wrap {width: 40%; max-width: 300px; min-height: 410px; position: relative;}
.tab_wrap .tab {visibility: hidden; position: absolute; top: 0;}
.tab_wrap .tab.active {visibility: visible;}
그래서 css에서 display: none 말고 안보이게 설정하고 position으로 위치 설정 해줬음.
출처: https://pochangliao.medium.com/swiper-js-multiple-shadow-cards-bef76976a68d