목록으로

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

itb

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전 조회 3,747

답변 2

안녕하세요. 한페이지에 thum슬라이드를 여러개 넣어야하는데

for 구문을 통해 여러개를 적용시키려고 하는데요.

왜안될까요?

let swiper 부분을 i로 돌릴 순 없을까요?

참고 사이트 : https://codesandbox.io/p/sandbox/rr7sqk?file=%2Findex.html

Copy

//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개

정렬:

채택된 답변

+20 포인트

천사의눈

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

이 코드에서 let swiper와 let swiper2는 각각 .thumSwiper와 .mainSwiper의 각 요소마다 새로운 Swiper 인스턴스를 생성하고 있습니다.
하지만 classList.add() 메서드에서 각 클래스 이름 앞에 점(.)이 들어가면 안되므로, 다음과 같이 수정해야 합니다.

Copy

MainSW[i].classList.add("mainSwiper" + i);
thumSW[i].classList.add("thumSwiper" + i);

이 수정 후에도 여러 개의 슬라이드를 추가하려면 .mainSwiper와 .thumSwiper의 요소 수 만큼 for 루프를 반복하고,
각 요소의 인덱스(i)를 사용하여 swiper와 swiper2를 생성하면 됩니다. 따라서 swiperFor() 함수는 다음과 같이 수정될 수 있습니다.

Copy

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 답변입니다.

로그인 후 평가할 수 있습니다