swiper 질문

소스는 
이렇게 해놨는데,,,

<script id="rendered-js">
   var mySwiper = new Swiper('.swiper-container22', {
      slidesPerView : 3, // 동시에 보여줄 슬라이드 갯수
      spaceBetween : 5, // 슬라이드간 간격
      slidesPerGroup : 1, // 그룹으로 묶을 수, slidesPerView 와 같은 값을 지정하는게 좋음
      spaceBetween: 15,
      disabledClass: 'swiper-button-disabled',
      navigation: {
         nextEl: '.swiper-button-next-search',
         prevEl: '.swiper-button-prev-search',
      },
   });
</script>

아래 이미지 처럼 페이지에 접근하면 첫번재 처럼 2개가 보이고,

거기서 창을 줄이거나 하면 3개로 정상적으로 보이는데 

이럴때는 왜이럴까여;;