[library] Swiper.js 편하게 슬라이드 캐러셀 구현하기

Swiper

https://swiperjs.com

유명하고 더 편한 터치 반응형 슬라이더들도 많지만 (slick 등등..) 제이쿼리를 쓰지 않고 바닐라JS만을 가지고 사용이 가능하며, 무료로 사용이 가능하기에 프로젝트에 자주 이용 하고 있는 슬라이더 라이브러리다.

React, Svelte, Vue, Angular 에서도 사용이 가능하다.

사용 방법

• NPM 으로 설치하기

$ npm install swiper

  // import Swiper JS
  import Swiper from 'swiper';
  // import Swiper styles
  import 'swiper/css';
  const swiper = new Swiper(...);

 

• CDN에서 사용하기

//CSS 파일 추가
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
//JS 파일 추가
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

기본적으로 설정해야할 부분들은
https://swiperjs.com/get-started 에서 확인하면 된다.