swiper slide안에 img갯수가 다른 스와이퍼의 정렬
안녕하세요 질문드립니다.
스와이퍼를 한페이제 3~4개씩 쓰는데
안에 img갯수가 다 다른 swiper입니다
silde가 넘어가면서 자꾸 img가 짤리는곳도 있고 정상적으로 넘어가는 slide도 있어서 어떻게 정렬해야 할까요?
</p>
<p><div class="swiper mySwiper left-swiper left-swiper0" dir="rtl"></p>
<p> <div class="swiper-wrapper"></p>
<p> <div class="swiper-slide"></p>
<p> <div class="thumb"></p>
<p> <img src="../img/keyBusinesses/meat/chicken.jpg" alt="" class="swiper-img"></p>
<p> </div></p>
<p> </div></p>
<p> <div class="swiper-slide"></p>
<p> <div class="thumb"></p>
<p> <img src="../img/keyBusinesses/meat/chicken_leg.jpg" alt="" class="swiper-img"></p>
<p> </div></p>
<p> </div></p>
<p> <div class="swiper-slide"></p>
<p> <div class="thumb"></p>
<p> <img src="../img/keyBusinesses/meat/chicken_wing.jpg" alt="" class="swiper-img"></p>
<p> </div></p>
<p> </div></p>
<p> <div class="swiper-slide"></p>
<p> <div class="thumb"></p>
<p> <img src="../img/keyBusinesses/meat/chicken_breast.jpg" alt="" class="swiper-img"></p>
<p> </div></p>
<p> </div></p>
<p> <div class="swiper-slide"></p>
<p> <div class="thumb"></p>
<p> <img src="../img/keyBusinesses/meat/chicken_legs.jpg" alt="" class="swiper-img"></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> </p>
<p> <div class="swiper mySwiper left-swiper left-swiper1" dir="rtl"></p>
<p> <div class="swiper-wrapper"></p>
<p> <div class="swiper-slide"></p>
<p> <div class="thumb"></p>
<p> <img src="../img/keyBusinesses/meat/slide3-img1.jpg" alt="" class="swiper-img"></p>
<p> </div></p>
<p> </div></p>
<p> <div class="swiper-slide"></p>
<p> <div class="thumb"></p>
<p> <img src="../img/keyBusinesses/meat/slide3-img2.jpg" alt="" class="swiper-img"></p>
<p> </div></p>
<p> </div></p>
<p> <div class="swiper-slide"></p>
<p> <div class="thumb"></p>
<p> <img src="../img/keyBusinesses/meat/slide3-img3.jpg" alt="" class="swiper-img"></p>
<p> </div></p>
<p> </div></p>
<p> <div class="swiper-slide"></p>
<p> <div class="thumb"></p>
<p> <img src="../img/keyBusinesses/meat/slide3-img4.jpg" alt="" class="swiper-img"></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p>const left_swiper = document.querySelectorAll(".shadow-box .left-swiper");</p>
<p> console.log(left_swiper);</p>
<p> for(let i=0; i < left_swiper.length; i++ ){</p>
<p> var swiper = new Swiper(`.left-swiper${[i]}`, {</p>
<p> slidesPerView: 'auto',</p>
<p> spaceBetween: 20,</p>
<p> width:400,</p>
<p> loop:true,</p>
<p> loopFillGroupWithBlank : true,</p>
<p> initialSlide:4,</p>
<p> autoplay: {</p>
<p> delay: 3500,</p>
<p> disableOnInteraction: false</p>
<p> },</p>
<p> navigation: {</p>
<p> nextEl: ".left-next"+[i],</p>
<p> </p>
<p> },</p>
<p> </p>
<p> });</p>
<p>답변 1개
블랙캣77
2년 전
가로가 다른데 다 400이시네요 해당도 배열로 넣어놓고 값을 주시던지 아니면 반복문으로 하는게 아닌 각각 다 따로 설정을 해보세요.
var swiper1
var swiper2 식으로 각각으로요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
g
gogo0911
2년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
정렬이 안되는 이유는 css 문제더라고요,,
수정완료하니 잘 되었습니다