swiper 스크립트 반응형 옵션 채택완료
long5472
4년 전
조회 3,273
반응형 페이지 제작중
스와이퍼를 이용한 5개의 이미지가 2줄로 3 그룹씩 움직입니다.
다만 모바일로 가니 5개가 아닌 2개로 바꾸고 싶어 이래저래 검색해봤는데
</p>
<p>var mql = window.matchMedia("screen and (max-width: 768px)");</p>
<p> if (mql.matches) {
console.log("화면의 너비가 768px 보다 작습니다.");
} else {
console.log("화면의 너비가 768px 보다 큽니다.");
}</p>
<p>
를 이용한 스크립트자체도 반응형을 줄 수가 있더라구요.
근데 자바스크립트는 아직 꽝인 초보자라 질문 남깁니다.
</p>
<p>var swiper = new Swiper('.swiper-container', {
slidesPerView: 5,
slidesPerColumn: 2,
slidesPerGroup:3,
spaceBetween: 30,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});</p>
<p>
에서 Perview =2
PerGroup =2 만 바꾸면 될것같은데,,
통째로 if, else 에 넣으니 안되더라구요..
유일한 질문게시판에 올려봅니다 ㅜ.
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
4년 전
https://github.com/nolimits4web/swiper/blob/master/demos/380-responsive-breakpoints.html
참고하세요.
breakpoints 옵션으로 지원합니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
l
long5472
4년 전
감사드립니다. 확인하였습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인