JS 스와이프 동작 구현을 위한 Swiper API

Swiper API

Swiper API는 웹 및 모바일 애플리케이션에서 스와이프 동작을 구현하기 위한 JavaScript 라이브러리입니다. 이 API는 사용자의 터치 입력을 감지하고 해당 동작을 가로 스와이프 또는 세로 스와이프로 해석하여 애플리케이션에 반응합니다.

Swiper API를 사용하면 다양한 스와이프 기능을 구현할 수 있습니다. 일반적으로 스와이프 기능은 이미지 슬라이더, 캐러셀, 슬라이드 메뉴, 드래그 앤 드롭 등의 인터랙티브한 기능을 구현하는 데 사용됩니다.

 

주요 메서드

• new Swiper(container, options)
  Swiper 인스턴스를 생성하는 메서드입니다. container는 Swiper 컨테이너 요소의 선택자 또는 DOM 객체이고, options는 Swiper의 옵션을 설정하는 객체입니다.
• swiper.slideNext(speed?, runCallbacks?)
  다음 슬라이드로 이동하는 메서드입니다. speed는 슬라이드 이동 속도를 지정하는 옵션으로 생략할 경우 기본값으로 설정됩니다. runCallbacks는 이동에 따른 콜백 실행 여부를 지정하는 옵션입니다.
• swiper.slidePrev(speed?, runCallbacks?)
  이전 슬라이드로 이동하는 메서드입니다. 파라미터와 옵션은 slideNext()와 동일합니다.
• swiper.slideTo(index, speed?, runCallbacks?)
  특정 인덱스의 슬라이드로 이동하는 메서드입니다. index는 이동할 슬라이드의 인덱스 값이며, speed와 runCallbacks는 옵션입니다.
• swiper.update()
  Swiper 컨테이너와 슬라이드의 크기를 업데이트하는 메서드입니다. 보통 슬라이드의 크기가 동적으로 변경되는 경우에 호출하여 레이아웃을 업데이트합니다.
• swiper.startAutoplay()
  자동 재생을 시작하는 메서드입니다. 자동 재생은 설정된 시간 간격으로 슬라이드가 자동으로 전환됩니다.
• swiper.stopAutoplay()
  자동 재생을 중지하는 메서드입니다.
• swiper.on(eventName, handler)
  특정 이벤트에 대한 이벤트 핸들러를 등록하는 메서드입니다. 예를 들어, slideChange 이벤트에 대한 핸들러를 등록하면 슬라이드가 변경될 때마다 해당 핸들러가 실행됩니다.
• swiper.off(eventName, handler)
  등록된 이벤트 핸들러를 제거하는 메서드입니다.

 

더욱 다양한 메서드와 기능들은 아래 Swiper API 공식문서를 참고하시면 됩니다.

 

https://swiperjs.com/swiper-api#methods-and-properties

Swiper - The Most Modern Mobile Touch Slider

 

---

예제: 간단한 이미지 슬라이더

 

HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg" alt="Image 1"></div>
    <div class="swiper-slide"><img src="image2.jpg" alt="Image 2"></div>
    <div class="swiper-slide"><img src="image3.jpg" alt="Image 3"></div>
  </div>
  <div class="swiper-pagination"></div>
</div>

CSS

.swiper-container {
  width: 100%;
  height: 300px;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
}

JS

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,              // 슬라이드 수
  spaceBetween: 20,              // 간격 (20px)
  loop: true,                    // 루프
  pagination: {                  // 페이징
    el: '.swiper-pagination',
    clickable: true
  },
  autoplay: {                    // 자동 재생 3초
    delay: 3000
  }
});