Swiper 옵션 알아보기

Swiper는 제가 겪은 슬라이드 관련 코드 중 단연 으뜸인 라이브러리입니다.
옵션도 많고, 다른 라이브러리와 병행해서 사용하여도 잘 깨지지 않는다는 장점이 있습니다.

그러나, 다양한 옵션이 있는데 이를 모르면 내 맘처럼 되지 않아 무척 답답한 마음이 들곤 합니다.
이러한 어려움을 해결해 드리고자 스와이퍼에서 자주 사용되는 옵션의 설명과 간단한 팁을 준비해 보았으니 참고해 보시기를 바랍니다.

// 기본 스와이퍼 JS 코드
var swiper = new Swiper(".main-swiper", {
  // 슬라이드 방향 설정 (horizontal: 가로{가로가 기본값입니다.}, vertical: 세로)
  direction: "vertical", 
  direction: 'horizontal',
  
  // 한 화면에 표시할 슬라이드 개수 설정 (숫자나 "auto" 사용 가능)
  slidesPerView: "auto", // 슬라이드의 넓이와 높이를 자동으로 계산하여 보여줍니다.
  slidesPerView: 1.7, // 소수점을 사용하여 끝부분이 약간 걸치도록 설정할 수 있습니다.
  
  // 슬라이드 무한 반복 (마지막 슬라이드가 끝나면 처음으로 돌아감)
  loop: true, // 무한 루프 활성화
  // 아래 설정들은 무한 슬라이드에 문제가 있을 시 하나하나 값을 조정하며 사용해 보세요.
  loopedSlides: 1, // 루프를 위한 슬라이드 수 설정
  loopAdditionalSlides: 1, // 추가로 슬라이드를 복사하여 사용 (루프 효과에 필요)
  
  // 슬라이드 효과 및 속성 설정
  effect: "fade", // 페이드 효과 사용
  spaceBetween: 24, // 슬라이드 간 간격 설정 (px 단위)
  slidesPerGroup: 4, // 그룹 단위로 슬라이드 이동 (한 번에 4개씩 이동)
  mousewheel: true, // 마우스 휠로 슬라이드 이동 가능
  
  // 슬라이딩 속도 (ms 단위)
  speed: 1000, // 슬라이드 전환 속도 설정
  
  // 시차(parallax) 효과 적용
  parallax: true, // 시차 효과 활성화
  
  // 슬라이드 터치/드래그 비율 조정 (0으로 설정 시 드래그 비활성화)
  touchRatio: 0, // 터치 드래그 비활성화
  allowTouchMove: false, // 터치 스와이프를 통한 슬라이드 이동 비활성화
  
  // DOM 요소 변화 감지 및 스와이퍼 업데이트
  // display:none;에서 풀려 보이게되었을 때 스와이퍼가 안될 때가 있습니다.
  // 이때 observer를 true로 주면 swiper가 다시 작동합니다.
  observer: true, // 변화 감지
  observeParents: true, // 부모 요소의 변화도 감지
  
  // 슬라이드 중앙 배치
  // 이 옵션을 사용할 경우 충돌이 많이 생깁니다.
  centeredSlides: true, // 활성화된 슬라이드를 중앙에 배치
  
  // 슬라이드 높이를 자동으로 맞춤
  autoHeight: true, // 슬라이드 높이 자동 조절
  
  // 자동 재생
  autoplay: {
    delay: 2500, // 자동 전환 시간 (ms 단위)
    disableOnInteraction: false, // 상호작용 후에도 자동 재생 유지
  },
  
  // 페이지네이션 설정 (클릭 가능)
  pagination: {
    el: ".swiper-pagination", // 페이지네이션 요소 선택
    clickable: true, // 페이지네이션 버튼 클릭 가능
  },
  
  // 네비게이션 버튼 설정 (이전/다음 버튼)
  navigation: {
    nextEl: ".swiper-button-next", // 다음 슬라이드 버튼 선택자
    prevEl: ".swiper-button-prev", // 이전 슬라이드 버튼 선택자
  },
  
  // 활성 슬라이드 변경 시 호출되는 이벤트 설정
  on: {
    activeIndexChange: function () {
      // 활성 슬라이드 인덱스가 0일 때 header의 클래스(on)를 제거, 아닐 때 추가
      if (this.realIndex == 0) {
        $(".header").removeClass("on");
      } else {
        $("header").addClass("on");
      }
    },
  },
  
  // 반응형 설정: 특정 화면 크기에 따라 슬라이드 수 및 간격을 변경
  // breakpoints을 사용할 경우 breakpoints의 밖에 있는 옵션들이 최소 크기에서의 설정값들이 됩니다.
  breakpoints: {
    // 화면이 768px 이상일 때 옵션 적용
    768: {
      slidesPerView: 2,
      spaceBetween: 40,
    },
    // 화면이 1024px 이상일 때 옵션 적용
    1024: {
      slidesPerView: 3, 
      spaceBetween: 50, 
    },
  },
});

// 스와이퍼 상호 연결 (swiper1과 swiper2를 동기화)
swiper1.controller.control = swiper2;
swiper2.controller.control = swiper1;

스와이퍼 공식 홈페이지(demo 페이지)는 꽤 무거운 편입니다.
위 내용들을 자주 보는 메모장 같은 곳에 옮겨 두어 필요할 때마다 꺼내 보시는 것을 추천드립니다.

---

스와이퍼 데모 페이지:

Swiper Demos