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