WEB개발이야기/웹퍼블리싱

현재 가장 모던한 모바일 터치 슬라이더 swiper

어쩌다보니여기까지~ 2019. 5. 24. 00:38
반응형

현재 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>