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{}
}
답변 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,
}
},
},
});
slidesPerView: 4, // 1200px 이하에서는 2열 2행으로 4개씩 보이기
이 부분의 숫자를 2로 하세요
답변을 작성하시기 전에 로그인 해주세요.