그누보드 QA - 스와이퍼슬라이드 한페이지에 여러개 사용하기

스와이퍼슬라이드 한페이지에 여러개 사용하기

itb 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.05.03 14:45:05 1454 (121.♡.♡.16)

답변 2

본문

안녕하세요. 한페이지에 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>

#javascript #스와이퍼 #슬라이드 #for구문

답변 2

천사의눈 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-05-03 15:16:08 218.♡.♡.60

이 코드에서 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 답변입니다.