swiper 슬라이드 반응형 질문

swiper 슬라이드 반응형 질문

QA

swiper 슬라이드 반응형 질문

답변 2

본문

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

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

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,
              }
            },
        
        },
        
      });
 
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #css ×
전체 2,086
© SIRSOFT
현재 페이지 제일 처음으로