Swiper 반응형 적용 방법

CSS 24.02.08

Swiper의 반응형 옵션은 breakpoints를 통해 설정할 수 있습니다.

breakpoints는 특정 뷰포트 크기에서 적용되는 Swiper 옵션을 정의합니다. 아래는 간단한 예제입니다.

var swiper = new Swiper('.swiper-container', {
  // 기본 옵션
  slidesPerView: 1,
  spaceBetween: 10,
  // 반응형 옵션
  breakpoints: {
    // 768px 이상에서는 3개의 슬라이드를 보여줌
    768: {
      slidesPerView: 3,
      spaceBetween: 20
    },
    // 1024px 이상에서는 5개의 슬라이드를 보여줌
    1024: {
      slidesPerView: 5,
      spaceBetween: 30
    }
  }
});

Colored by Color Scripter

위의 코드에서, Swiper는 초기에는 기본 옵션으로 초기화되지만, 뷰포트 크기가 768px 이상이 되면 breakpoints 내의 옵션으로 업데이트됩니다.

뷰포트 크기가 1024px 이상이 되면 또 다른 옵션으로 업데이트됩니다.

예제

See the Pen swiper responsive by designkits (@designkits) on CodePen.

블로그 전체목록

최근 포스트