[JS 라이브러리] Swiper.js의 모든 것

JINJIN·2023년 2월 23일

JavaScript 라이브러리

JS 라이브러리

목록 보기

2/4

수 많은 JS 라이브러리들을 하나씩 정복하기 위해서 작성하는 글입니다.

📌 Swiper.js란?

Swiper.js란 무엇인가?

Swiper.js란 모바일 및 데스크탑에 사용하기 적합한 오픈소스 JavaScript 라이브러리입니다.

간단한 HTML, CSS, JS 코드로 반응형 슬라이드쇼 및 스와이퍼 기능을 쉽게 구현할 수 있습니다.

Swiper.js 특징

Swiper.js의 주요 특징은 다음과 같습니다.

모바일 및 데스크탑에서 모두 호환
반응형 웹사이트에 최적화
터치 스와이프 이벤트를 기반으로한 슬라이드쇼 및 스와이퍼 기능을 지원
CSS3 기반으로 애니메이션을 지원
다양한 옵션을 제공하여 사용자가 자유롭게 슬라이드쇼 및 스와이퍼를 커스터마이징 가능

📌 Swiper.js 사용방법

Swiper.js 설치 방법

1) CDN을 이용한 방법

Swiper.js는 여러 개의 CDN을 제공하고 있습니다. 따라서 가장 간편하게 Swiper.js를 사용할 수 있는 방법 중 하나는, CDN을 이용하여 Swiper.js를 로드하는 것입니다.

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

2) 로컬 설치 방법

Swiper.js를 로컬에 다운로드하여 사용할 수도 있습니다. 이 방법은 Swiper.js의 소스코드를 직접 수정하거나 커스터마이징할 필요가 있을 때 유용합니다.

먼저, Swiper.js 소스코드를 다운로드 받은 후, HTML 파일에서 로드할 수 있도록 경로를 지정해주어야 합니다.

<!-- CSS -->
<link rel="stylesheet" href="path/to/swiper-bundle.min.css" />

<!-- JS -->
<script src="path/to/swiper-bundle.min.js"></script>

위의 코드에서 path/to/를 Swiper.js 소스코드가 저장된 경로로 변경하여 사용하면 됩니다.

3) npm을 이용한 방법

npm을 이용하여 Swiper.js를 설치하는 방법도 있습니다. 이 방법은 npm을 사용하는 프로젝트에서 Swiper.js를 사용할 때 유용합니다.

먼저, npm 명령어를 이용하여 Swiper.js를 설치합니다.

npm install swiper

Swiper.js가 node_modules 폴더에 설치되면, 이후 방법은 로컬 설치 방법과 동일합니다.

Swiper.js 기본 설정

Swiper 라이브러리를 로드합니다.

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

HTML에 Swiper 컨테이너를 생성합니다.

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

Swiper 객체를 생성하고 옵션을 설정합니다.

const mySwiper = new Swiper('.swiper-container', {
  // 옵션 설정
});

Swiper.js 옵션 설정

Swiper 객체를 생성할 때, 다양한 옵션을 설정할 수 있습니다. Swiper.js의 옵션은 다양하게 제공되며, 사용자가 원하는 기능에 따라 설정할 수 있습니다. 아래는 Swiper.js에서 제공하는 주요 옵션들입니다.

1. direction

슬라이드 방향을 설정합니다.
horizontal: 수평 방향 (기본값)
vertical: 수직 방향

const mySwiper = new Swiper('.swiper-container', {
  direction: 'horizontal'
});

2. loop

슬라이드 루프 설정 여부를 결정합니다.
true: 무한 루프 (기본값)
false: 루프 없음

const mySwiper = new Swiper('.swiper-container', {
  loop: true
});

3. autoplay

자동 재생 여부를 설정합니다.
false: 자동 재생 끔 (기본값)
true: 자동 재생 켬
delay: 자동 재생 딜레이 시간 (ms)

const mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 3000
  }
});

4. speed

슬라이드 애니메이션 속도를 설정합니다. (ms)
기본값은 300

const mySwiper = new Swiper('.swiper-container', {
  speed: 500
});

5. slidesPerView

한 번에 보여지는 슬라이드 수를 설정합니다.
1: 한 개씩 보이기 (기본값)
2: 두 개씩 보이기
3: 세 개씩 보이기
auto: 슬라이드의 넓이나 높이에 따라 자동으로 계산

const mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 2
});

6. pagination

페이징 설정 여부를 결정합니다.
false: 페이징 끔 (기본값)
true: 페이징 켬
type: 페이징 종류 (bullets, fraction, progressbar, custom)

const mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets'
  }
});

이전/다음 버튼 설정 여부를 결정합니다.
false: 버튼 끔 (기본값)
true: 버튼 켬
nextEl: 다음 버튼 선택자
prevEl: 이전 버튼 선택자

const mySwiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

8. scrollbar

스크롤바 설정 여부를 결정합니다.
false: 스크롤바 끔 (기본값)
true: 스크롤바 켬
hide: 스크롤바 숨김

const mySwiper = new Swiper('.swiper-container', {
  scrollbar: {
    el: '.swiper-scrollbar',
    hide: true
  }
});

9. effect

슬라이드 애니메이션 효과를 설정합니다.
slide: 기본 슬라이드 효과 (기본값)
fade: 페이드 효과
cube: 큐브 효과
coverflow: 커버플로우 효과
flip: 플립 효과

const mySwiper = new Swiper('.swiper-container', {
  effect: 'fade'
});

위와 같이 Swiper.js의 다양한 옵션들을 활용하여 슬라이드쇼나 스와이퍼 기능을 보다 효과적으로 구현할 수 있습니다. 이 외에도 Swiper.js에서 제공하는 다양한 옵션이 있으니, 필요에 따라 문서를 참고하여 사용해 보시기 바랍니다.

https://swiperjs.com (Swiper 공식 사이트)

📌 Swiper.js 장단점

Swiper.js의 장점

사용 방법이 간편
다양한 옵션과 효과를 제공하여, 다양한 슬라이드쇼 구현 가능
반응형 웹 디자인을 지원하므로, 모바일 환경에서도 이용 가능
마크업 코드와 스타일 코드를 분리하여 작성할 수 있어, 유지보수가 용이
유연하게 커스터마이징 가능

Swiper.js의 단점

Swiper.js의 버전 업그레이드가 늦어질 때가 있어, 기능 추가를 기다려야 할 수도 있음
기능이 많아 복잡할 수 있음

이상으로 Swiper.js에 대한 정보, 사용방법, 예시코드, 장단점에 대해 알아보았습니다. Swiper.js는 다양한 옵션과 효과를 제공하여, 다양한 슬라이드쇼 및 스와이퍼 구현에 유용하게 사용될 수 있습니다.

JINJIN

안녕하세요! 배우는 것을 좋아하는 개발자 JINJIN입니다.

이전 포스트

[JS 라이브러리] Fullpage.js의 모든 것

다음 포스트

[JS 라이브러리] Swiper.js의 모든 것