스와이퍼슬라이드 한페이지에 여러개 사용하기
본문
안녕하세요. 한페이지에 thum슬라이드를 여러개 넣어야하는데
for 구문을 통해 여러개를 적용시키려고 하는데요.
왜안될까요?
let swiper 부분을 i로 돌릴 순 없을까요?
참고 사이트 : https://codesandbox.io/p/sandbox/rr7sqk?file=%2Findex.html
//html
<div class="box1">
<!-- main -->
<div class="swiper mainSwiper" style="--swiper-navigation-color: #dcdcdc">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="<?php echo G5_IMG_URL ?>/pro1_sec2_img1.jpg" alt="1" />
</div>
<div class="swiper-slide">
<img src="<?php echo G5_IMG_URL ?>/pro1_sec2_img2.jpg" alt="2" />
</div>
<div class="swiper-slide">
<img src="<?php echo G5_IMG_URL ?>/pro1_sec2_img3.jpg" alt="2" />
</div>
<div class="swiper-slide">
<img src="<?php echo G5_IMG_URL ?>/pro1_sec2_img4.jpg" alt="2" />
</div>
<div class="swiper-slide">
<img src="<?php echo G5_IMG_URL ?>/pro1_sec2_img9.jpg" alt="2" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- thum -->
<div thumbsSlider="" class="swiper thumSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="<?php echo G5_IMG_URL ?>/pro1_sec2_img1.jpg" alt="1" />
</div>
<div class="swiper-slide">
<img src="<?php echo G5_IMG_URL ?>/pro1_sec2_img2.jpg" alt="2" />
</div>
<div class="swiper-slide">
<img src="<?php echo G5_IMG_URL ?>/pro1_sec2_img3.jpg" alt="2" />
</div>
<div class="swiper-slide">
<img src="<?php echo G5_IMG_URL ?>/pro1_sec2_img4.jpg" alt="2" />
</div>
<div class="swiper-slide">
<img src="<?php echo G5_IMG_URL ?>/pro1_sec2_img9.jpg" alt="2" />
</div>
</div>
</div>
</div>
//스크림트
<script>
// 제품슬라이드 추가
function swiperFor() {
const MainSW = document.querySelectorAll('.mainSwiper');
const thumSW = document.querySelectorAll('.thumSwiper');
for (var i = 0; i < MainSW.length; i++) {
MainSW[i].classList.add(".mainSwiper" + i);
thumSW[i].classList.add(".thumSwiper" + i);
let swiper = new Swiper(".thumSwiper" + i, {
spaceBetween: 10,
slidesPerView: 5,
freeMode: true,
watchSlidesProgress: true,
});
let swiper2 = new Swiper(".mainSwiper" + i, {
// spaceBetween: 10,
navigation: {
nextEl: ".mainSwiper" + i + " .swiper-button-next",
prevEl: ".mainSwiper" + i + " .swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
});
}
// for문
};
swiperFor();
</script>
답변 2
이 코드에서 let swiper와 let swiper2는 각각 .thumSwiper와 .mainSwiper의 각 요소마다 새로운 Swiper 인스턴스를 생성하고 있습니다.
하지만 classList.add() 메서드에서 각 클래스 이름 앞에 점(.)이 들어가면 안되므로, 다음과 같이 수정해야 합니다.
MainSW[i].classList.add("mainSwiper" + i);
thumSW[i].classList.add("thumSwiper" + i);
이 수정 후에도 여러 개의 슬라이드를 추가하려면 .mainSwiper와 .thumSwiper의 요소 수 만큼 for 루프를 반복하고,
각 요소의 인덱스(i)를 사용하여 swiper와 swiper2를 생성하면 됩니다. 따라서 swiperFor() 함수는 다음과 같이 수정될 수 있습니다.
function swiperFor() {
const mainSwipers = document.querySelectorAll('.mainSwiper');
const thumSwipers = document.querySelectorAll('.thumSwiper');
for (let i = 0; i < mainSwipers.length; i++) {
thumSwipers[i].classList.add("thumSwiper" + i);
mainSwipers[i].classList.add("mainSwiper" + i);
let swiper = new Swiper(".thumSwiper" + i, {
spaceBetween: 10,
slidesPerView: 5,
freeMode: true,
watchSlidesProgress: true,
});
let swiper2 = new Swiper(".mainSwiper" + i, {
navigation: {
nextEl: ".mainSwiper" + i + " .swiper-button-next",
prevEl: ".mainSwiper" + i + " .swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
});
}
}
이렇게 수정하면 여러 개의 .mainSwiper와 .thumSwiper 요소를 사용할 수 있습니다.
챗GPT 답변입니다.
감사합니다 천사의 눈님 해결하였습니다!
답변을 작성하시기 전에 로그인 해주세요.