breakpoints:

swiper를 사용해 pc버전만 구현 해놨더니 모바일 버전에서 레이아웃 찌그러지고 난리가 났다.

swiper Demo를 찾아보니 반응형을 위한 옵션이 있더라, 나만 그런지 모르겠지만 대게 swiper가 혹은 js 익숙하지 않은 분들은 같은 실수를 일으킬 것 같아 글을 남긴다.

초기값 설정

나는 pc버전을 먼저 구현 해놓고 모바일로 맞춰가는 작업을 했다. 모바일에서는 슬라이드가 하나만 보였으면 좋겠어서 breakpoints에 420:{ slidesPreView:1} 을 주었다.

그랬더니 pc버전에서 슬라이드가 하나만 나오는 문제가 생겼다.

breakpoints: 의 포인트는 먼저 초기값을 모바일로 두어야 한다는 것이다.
그리고 차츰 사이즈를 늘려가면서 조절해야한다

모바일 때는 슬라이드가 한 개 768 사이즈 이상일 때는 2개 1024사이즈 이상 일 때는 3개의
예시 코드를 남기며 물러나겠다.

 var swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,  //초기값 설정 모바일값이 먼저!!
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        breakpoints: {
        
          768: {
            slidesPerView: 2,  //브라우저가 768보다 클 때
            spaceBetween: 40,
          },
          1024: {
            slidesPerView: 3,  //브라우저가 1024보다 클 때
            spaceBetween: 50,
          },
        },
      });