[JS] swiper.js 슬라이드 라이브러리 사용법

 

 

 

 

 웹에서 슬라이드, 스와이프 UI는 준 필수라고 할정도로 쉽게 찾아볼 수 있고 많이 사용된다.
공부를하며 여태까진 직접구현 예제로서 구현했지만 실제로는 이미 구현된 플러그인, 라이브러리를 주로 사용한다하여

활용하는 법을 익히고, 사용해보려 한다.

 

슬라이드, 스와이프 라이브러리도 하나만 있는 것이 아닌 다양한 라이브러리가 존재하지만, 그중 스와이퍼와 슬릭을 고민하다가 스와이퍼가 완전한 무료 오픈 소스라 하여 스와이퍼로 결정.

샘플 코드 및 확인

 

swiper.js란?

swipe.js는 편리하고 강력한 슬라이더를 구현하는 라이브러리이다.
모바일도 지원하며, jquey와 같은 별도의 프레임워크가 필요 없다.
그리고 오픈 소스라서 무료로 사용할 수 있다.
더 자세한 정보는 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>

1. 다운받아 연동하기

• npm으로 다운받기
  $ npm install swiper
• 압축 파일도 다운받기다운 받은 뒤 파일 위치에 맞게 link 태그와 script 태그를 추가한다.
• <link rel="stylesheet" href="css/swiper.css"> <script src="js/swiper.js"></script>
• zip 파일
  tar 파일

swiper.js 사용법

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

ParameterTypeDefaultDescription

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에서 확인할 수 있다.