[JavaScript] Swiper 사용법 - 슬라이드 구현

function_dh·2020년 12월 7일

JavaScript library swiper

설치

swiper를 사용하려면 여러 방법이 존재합니다.

cdn으로 사용하는 방식
실제 swiper js파일을 swiper github에서 다운 받아 삽입하는 방식
npm으로 설치하여 사용하는 방식

프로젝트에 따라서 원하는 방식으로 공식 문서에서 제공하는 설치법에 따라 설치하시면 됩니다.

Getting Started With Swiper

기본 구조

swiper는 슬라이드 라이브러리로 다양한 메소드와 설정을 지원해서 사용하기 매우 편한 점이 있습니다. 무엇보다 하위 브라우저(ie9)에서도 문제없이 사용 가능하기 때문에 크로스 브라우징 측면에서도 뛰어난 부분이 있습니다.

또한 사용법도 매우 간단합니다. 아래와 같이 태그에 class만 넣어주고 스크립트에서 슬라이드로 사용할 태그를 지정만 해주면 됩니다. 주의 할 점은 swiper 사용시 필수로 아래 구조와 같이 클래스 명을 지정해줘야 합니다.

swiper-container > swiper-wrapper > swiper-slide 구조로 되어 있습니다.

// 마크업
<div id="test-slide" class="swiper-container">
  <ul class="swiper-wrapper">
    <li class="swiper-slide">슬라이드1</li>
    <li class="swiper-slide">슬라이드2</li>
  </ul>
</div>

// 필수X (아래 옵션정리-추가설정-pagination 부분 참고)
<div class="pagination"></div>

// 스크립트
const slide = new Swiper('#test-slide', {
  // 다양한 옵션 설정, 
  // 아래에서 설명하는 옵션들은 해당 위치에 들어갑니다!!
  slidesPerView : 'auto',
  spaceBetween : 6, 
})

옵션 정리

swiper 옵션 설정을 변수에 담아서 사용 할 수도 있습니다. 변수에 담아서 사용 시에 설정을 재활용하기 편하다는 장점이 있습니다.

// 일반 swiper 설정 예시
const slide = new Swiper('#test-slide', {
  slidesPerView : 'auto',
  spaceBetween : 6, 
})

// 변수에 담아서 활용 예시
var slideSetting = {
  slidesPerView : 'auto',
  spaceBetween : 6,
  loop : false,
}
const slide = new Swiper('#test-slide', slideSetting)

기본 설정

기본적으로 슬라이드를 사용할 때 거의 필수로 설정하는 설정 요소들 입니다. 한 화면에 보여줄 슬라이드의 갯수 설정, 슬라이드 간의 사이 여백, 반복 여부 등 기본적인 설정을 정리 해놨습니다.

slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수
spaceBetween : 6, // 슬라이드 사이 여백
loop : false, // 슬라이드 반복 여부
loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
pagination : false, // pager 여부
autoplay : {  // 자동 슬라이드 설정 , 비 활성화 시 false
  delay : 3000,   // 시간 설정
  disableOnInteraction : false,  // false로 설정하면 스와이프 후 자동 재생이 비활성화 되지 않음
},
navigation: {   // 버튼 사용자 지정
	nextEl: '.swiper-button-next',
	prevEl: '.swiper-button-prev',
},

추가 설정

자주 사용하지 않지만 상황에 따라 쉽게 슬라이드를 커스텀 할 수 있는 옵션 요소들 입니다.

freeMode : false, // 슬라이드 넘길 때 위치 고정 여부
autoHeight : true, // true로 설정하면 슬라이더 래퍼가 현재 활성 슬라이드의 높이에 맞게 높이를 조정합니다.
a11y : false, // 접근성 매개변수(접근성 관련 대체 텍스트 설정이 가능) - api문서 참고!
resistance : false, // 슬라이드 터치에 대한 저항 여부 설정
slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동
centeredSlides : true // true시에 슬라이드가 가운데로 배치
allowTouchMove : true, // false시에 스와이핑이 되지 않으며 버튼으로만 슬라이드 조작이 가능
watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
slidesOffsetBefore : number, // 슬라이드 시작 부분 여백
slidesOffsetAfter : number, // 슬라이드 시작 부분 여백

pagination : {   // 페이저 버튼 사용자 설정
  el : '.pagination',  // 페이저 버튼을 담을 태그 설정
  clickable : true,  // 버튼 클릭 여부
  type : 'bullets', // 버튼 모양 결정 "bullets", "fraction" 
  renderBullet : function (index, className) {  // className이 기본값이 들어가게 필수 설정
    return '<a href="#" class="' + className + '">' + (index + 1) + '</a>'
  },
  renderFraction: function (currentClass, totalClass) { // type이 fraction일 때 사용
    return '<span class="' + currentClass + '"></span>' +
           '<span class="' + totalClass + '"></span>';
  }
},

초기화 설정

초기화 설정 방법은 2가지가 있습니다. swiper가 초기화 될 때, 초기화 된 후 설정을 할 수가 있습니다.

on을 매개 변수로 전달 할 시에 swiper가 생성될 때 즉 초기화 될 때 설정을 해줄 수가 있고 다른 방법으로 아래 코드처럼 따로 사용 시에는 swiper가 이미 만들어지고 나서 동작하기 때문에 초기화 된 후 동작합니다.

초기화 설정과 관련하여 수많은 설정이 있기 때문에 아래 참고사이트에서 필요한 부분을 찾아서 사용하는 것이 좋습니다.

// 매개 변수로 사용시 swiper가 초기화 될 때 동작합니다.
var mySwiper = new Swiper('.swiper-container', {
  on : {
    init : function () {
      console.log('swiper 초기화 될때 실행');
    },
    imagesReady : function () { // 모든 내부 이미지가 로드 된 직후 이벤트가 시작됩니다.
      console.log('슬라이드 이미지 로드 후 실행');
    },
  },
};

// swiper가 초기화 된 후 동작합니다.
var mySwiper = new Swiper('.swiper-container', {
  // ...
};
mySwiper.on('init', function () {
  console.log('slide가 초기화 설정을 마친 후 실행');
});

반응형 설정

swiper는 breakpoints라는 객체로 반응형 설정이 가능합니다. 아래 설정은 브라우저의 가로 크기가 768px 이하 일 때 동작하는 예시입니다.

breakpoints : { // 반응형 설정이 가능 width값으로 조정
  768 : {
    slidesPerView : 1,
  },
},

//5.3.0부터 "비율"(너비 / 높이)로 설정이 가능해졌습니다.
var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  breakpoints: {
    '@0.75': {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    '@1.00': {
      slidesPerView: 3,
      spaceBetween: 40,
    },
    '@1.50': {
      slidesPerView: 4,
      spaceBetween: 50,
    },
  }
});

메소드

swiper이름.메소드() 형식으로 사용할 수 있습니다.

// ex) mySlider.autoplay.start()
.slideTo(index, speed, runCallbacks) // 해당 슬라이드로 이동
.slidePrev(index, speed, runCallbacks) // 이전 슬라이드로 이동
.slideNext(index, speed, runCallbacks) // 다음 슬라이드로 이동
.autoplay.start(); // 자동 재생 시작
.autoplay.stop(); // 자동 재생 정지
.destroy() // 슬라이드 제거