본문 바로가기
반응형

현재 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에 대하여 swiperswiper.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>
반응형

UX 공작소

UX와 UI에 관해 내가 알게된 다양한 이야기를 공유해요~