React - Swiper breakpoints로 반응형 만들기

화면을 줄이게 되면 가운데를 벗어나게 되고 또 이미지들이 꽉찬 느낌이 있어서 시작된 반응형 만들기

위 사진 처럼 뭔가 어긋난 느낌이 든다.

여기저기 찾아보다가 알게된 breakpoints

breakpoints

breakpoints란 Swiper에서 slider를 반응형으로 만들게 해주는 prop

SwiperAPI 의 breakpoints의 예시 코드

const swiper = new Swiper('.swiper', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

screen 크기 마다 바꿔주는 예시이다.
즉 breakpoints가 320이라면 320이상의 화면에서는

slidesPerView: 2,
spaceBetween: 20

라는 코드로 바뀌게 될것이다.

처음 시작 slidesPreview를 2로 시작해 768과 1024 로 섹션을 나누어 하나씩 증가하게 했다.

slidesPerView={2}

breakpoints={{
             
  768:{
slidesPerView:3             
},
1024:{
slidesPerView:4
}

}}
        

위 코드는 jsx코드 예시입니다.

처음에 영화 포스터가 2개에서 시작해 크기에 따라 3,4개로 변경된다.