swiper 반응형에서 사용방법좀 알려주세요..
본문
pc에서는 이미지가 5개가 나오고...
768이하에서는 이미지가 4개만 나오게 하고.. 이미지 사이즈도 화면에 맞게 줄어들게 하고 싶은데요...
어떻게 해야하나요???
답변 1
https://github.com/nolimits4web/Swiper/blob/master/demos/380-responsive-breakpoints.html
위에 참고하셔서 원하시는대로 하시면 되겠습니다.
샘플사이트
https://swiperjs.com/demos/380-responsive-breakpoints.html
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 10,
// init: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 4,
spaceBetween: 40,
},
1024: {
slidesPerView: 5,
spaceBetween: 50,
},
}
});
</script>
Swiper가 최신 버전이어야합니다.
좋아요 꾹~~~