테스트 사이트 - 개발 중인 베타 버전입니다

swiper 반응형에서 사용방법좀 알려주세요.. 채택완료

4번가 5년 전 조회 9,654

pc에서는 이미지가 5개가 나오고...

768이하에서는 이미지가 4개만 나오게 하고.. 이미지 사이즈도 화면에 맞게 줄어들게 하고 싶은데요...

 

어떻게 해야하나요???

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

답변 1개

채택된 답변
+20 포인트
5년 전

https://github.com/nolimits4web/Swiper/blob/master/demos/380-responsive-breakpoints.html">https://github.com/nolimits4web/Swiper/blob/master/demos/380-responsive-breakpoints.html

위에 참고하셔서 원하시는대로 하시면 되겠습니다. 

샘플사이트

https://swiperjs.com/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가 최신 버전이어야합니다. 

 

좋아요 꾹~~~

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

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

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

로그인