반응형
현재 github에서 거의 20,000에 달하는 Star을 받고 있는 모던한 모바일 터치슬라이더 플러그인입니다.
모바일뿐 아니라 Web화면에서도 아주 잘 작동하는 검증된 플러그인이라고 보시면됩니다.
MIT 라이선스를 가지고 있어서 부담없이 사용할 수 있고 데모 사이트에서 다양한 Swipe DEMO를 보고 쉽게 적용할 수 있습니다.
홈페이지
DEMO
Install
아래와 같은 다양한 방법으로 소스를 적용할 수 있습니다.
- bower로 설치할 경우
$ bower install swiper- 또는 Atmosphere as Meteor 패키지로 설치할 경우
$ meteor add nolimits4web:swiper- 또는 NPM으로 설치할 경우
$ npm install swiper- 또는 CDN으로 사용할 경우
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>CDN으로 적용하는 예제
CDN으로 적용하는 예제는 아래와 같습니다.
아래와 같이 js와 css에 대하여 swiper나 swiper.min 중 하나만 적용하면 됩니다.
Markup
<!DOCTYPE html> <html lang="en"> <head> ... <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css"> </head> <body> ... <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script> </body> </html>기본골격
html내에 슬러이더가 나올 부분의 Markup의 기본골격은 아래와 같습니다.
<!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <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 class="swiper-pagination"></div> <!-- 양옆에 좌우 버튼이 필요하다면 추가하세요 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 스크롤바가 필요하다면 추가하세요 --> <div class="swiper-scrollbar"></div> </div>CSS
기본 스와이프 될 컨테이너의 사이즈를 잡으시면 됩니다.
.swiper-container { width: 600px; height: 300px; }javascript
마지막으로 JS에서 Swiper를 초기화해야합니다.
<body>...</body>태그 내의 하단에 아래와 같이 javascript를 작성하시면 됩니다.
<body> ... <script> var mySwiper = new Swiper ('.swiper-container', { // Optional parameters direction: 'vertical', loop: true, // If we need pagination pagination: { el: '.swiper-pagination', }, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // And if we need scrollbar scrollbar: { el: '.swiper-scrollbar', }, }) </script> </body>만약 jquery나 Zepto를 사용한다면 아래의 코드로 대체할 수 있습니다.
<script> $(document).ready(function () { //initialize swiper when document ready var mySwiper = new Swiper ('.swiper-container', { // Optional parameters direction: 'vertical', loop: true }) }); </script>
