SIR
목록으로

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

gogo0911
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 4,712
답변 1
목록

안녕하세요 질문드립니다.

스와이퍼를 한페이제 3~4개씩 쓰는데

안에 img갯수가 다 다른 swiper입니다

silde가 넘어가면서 자꾸 img가 짤리는곳도 있고 정상적으로 넘어가는 slide도 있어서 어떻게 정렬해야 할까요?

 

Copy 
<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],

               

            },

           

        });
#슬라이드 #swiper #slide #css #js

답변 1개

가로가 다른데 다 400이시네요 해당도 배열로 넣어놓고 값을 주시던지 아니면 반복문으로 하는게 아닌 각각 다 따로 설정을 해보세요.

var swiper1 
var swiper2 식으로 각각으로요
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

답변 감사합니다
정렬이 안되는 이유는 css 문제더라고요,,
수정완료하니 잘 되었습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고