[플러그인] swiper.js 사용법

웹에서 스와이프 UI는 자주 사용된다.
직접 구현할 수도 있지만 이미 구현된 플러그인, 라이브러리를 주로 사용한다.
swiper.js은 현재 작업하는 프로젝트에서 사용하는 플러그인이다.
내가 선택해서 사용한 건 아니고, 이전부터 swiper.js를 사용하고 있어 따라서 사용했다 ㅎㅎ
(예시 이미지의 naver clova 페이지에서도 swiper.js가 사용되었다.)

💡swiper.js란?

swipe.js는 편리하고 강력한 슬라이더를 구현하는 라이브러리이다.
모바일도 지원하며, jquey와 같은 별도의 프레임워크가 필요 없다.
그리고 오픈 소스라서 무료로 사용할 수 있다.
최신 버전은 v5.4.3이다. (2020.06.14 기준)
더 자세한 정보는swiper.js 공식 홈페이지를 참고해주세요.

💡swiper.js 연동하기

swipe.js를 연동하는 방법은 2가지이다.

1. CDN으로 연동하기

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

2. 다운받아 연동하기

• npm으로 다운받기
  $ npm install swiper

• 압축 파일도 다운받기

  zip 파일
  tar 파일

  다운 받은 뒤 파일 위치에 맞게 link 태그와 script 태그를 추가한다.

  <link rel="stylesheet" href="css/swiper.css"> 
  <script src="js/swiper.js"></script>

  
  

💡swiper.js 사용법

1. html - 클래스 추가하기
   swiper 플러그인을 사용하려면 3개의 구조가 필요하다
   swiper-container > swiper-wrapper > swiper-slide
   이 중swiper-slide는 스와이프 되는 요소이다.

   <div class="container swiper-container">
       <div class="item_list swiper-wrapper">
           <div class="item swiper-slide">item1</div>
           <div class="item swiper-slide">item2</div>
           <div class="item swiper-slide">item3</div>
       </div>
   </div>

swiper-container, swiper-wrapper, swiper-slide 클래스는
swiper.js를 사용하기 위해 꼭 필요한 클래스이다.
여러 swiper가 사용될 수 있고, 유지보수를 위해 swiper 클래스가 아닌
다른 클래스를 추가해 스타일 적용, 스크립트 처리하는 것을 추천한다.

💡swiper.js 옵션

Parameter	Type	Default	Description
direction	string	'horizontal'	스와이프 방향 'horizontal' or 'vertical'
speed	number	300	스와이프 되는 속도
effect	string	'slide'	스와이프 효과 'slide', 'fade', 'cube', 'coverflow' or 'flip'
slidesPerView	number or 'auto'	1	동시에 보이는 슬라이드 갯수
spaceBetween	number	0	슬라이드간 간격
autoplay	object/boolean	-	자동으로 스와이프 되도록

그 외 다양한 옵션은 swiper.API에서 확인할 수 있다.