SIR
목록으로

swiper 슬라이드 반응형 질문 채택완료

바바트컨트롤
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 11,968
답변 2
목록

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

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

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

조언부탁드립니다ㅠ

Copy 
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,
        }
    }
});

 

Copy 
.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

 

#javascript #css

답변 2개

채택된 답변
+20 포인트

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

        
      });
로그인 후 평가할 수 있습니다

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

slidesPerView: 4, // 1200px 이하에서는 2열 2행으로 4개씩 보이기

이 부분의 숫자를 2로 하세요

로그인 후 평가할 수 있습니다

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

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

로그인
🐛 버그신고