[Swiper] 스와이퍼 여러 개를 설정해보자 multiple swiper

 

기존 스와이퍼 설정

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