swiper 슬라이드 반응형 질문

swiper 슬라이드 반응형 질문

QA

swiper 슬라이드 반응형 질문

본문

아래 그림과 같이 진행하려고 하는데

계속 한줄로만 먹드라구요...

js가 틀린건지.. css를 다르게 먹여야하는게 있는지

조언부탁드립니다ㅠ


new Swiper('.EventSlideWrap', {
    loop: true,
    paginationClickable: false,
    spaceBasdetween: 0,
    speed: 500,
    autoplay: false,
    breakpoints: {
        1200: {
          slidesPerView: 4, // 1200px 이상에서는 1줄에 4개씩 보이기
          slidesPerColumn: 1,
        },
        0: {
          slidesPerView: 4, // 1200px 이하에서는 2열 2행으로 4개씩 보이기
          slidesPerColumn: 2,
        }
    }
});

 


.EventSlide{ margin: 0 auto;}
.EventSlideWrap{position: relative;    overflow: hidden;}
.EventSlideWrap .swiper-wrapper{}
.EventSlideWrap .swiper-slide{}
.EventSlideWrap .swiper-slide img{}
@media all and (max-width:1200px)
{
.EventSlide{ margin: 0 auto;}
.EventSlideWrap{position: relative;    overflow: hidden;}
.EventSlideWrap .swiper-wrapper{}
.EventSlideWrap .swiper-slide{}
.EventSlideWrap .swiper-slide img{}
}

 

3529194778_1699426966.5317.png

 

이 질문에 댓글 쓰기 :

답변 2


 
new Swiper(".EventSlideWrap", {
        slidesPerView: 2,
        grid: {
          rows: 2,
        },
        loop: true,
        paginationClickable: false,
        spaceBasdetween: 0,
        speed: 500,
        autoplay: false,
        
        breakpoints: {
            1200: {
              slidesPerView: 4, // 1200px 이상에서는 1줄에 4개씩 보이기
              grid: {
                  rows: 1,
              }
            },
        
        },
        
      });
 
답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

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