목록으로

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

itb

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

2년 전 조회 3,745

답변 2

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

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

왜안될까요?

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

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

Copy



//html

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

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