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