swiper slide안에 img갯수가 다른 스와이퍼의 정렬

swiper slide안에 img갯수가 다른 스와이퍼의 정렬

QA

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 식으로 각각으로요
답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT