본문 바로가기

현재 가장 모던한 모바일 터치슬라이더로 모바일뿐만아니라 일반 웹화면에서도 요긴하게 사용할 만한 플러그인입니다. 다양한 Swipe를 DEMO로 볼 수 있으며 쉽게 적용이 가능합니다. jQuery가 설치되어 있어야 하며 MIT라이선스를 가지고 있습니다.
sds

홈페이지

DEMO

Install

bower로 설치할 경우

bower install swiper

일반 사용법

css와 js를 임포트합니다.
jquery를 사용하지 않는다면 swiper.min.js만 임포트하면되고
jquery를 사용한다면 jquery.jsswiper.jquery.min.js를 임포트하면 됩니다. 아래의 Markup에는 jquery를 사용하는것으로 작성하였습니다.

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...

    <!--
    <script src="path/to/swiper.min.js"></script>
    -->
    <script src="path/to/jquery.js"></script>
    <script src="path/to/swiper.jquery.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

body태그내의 하단에 아래와 같이 javascript를 작성하거나 jquery를 사용하신다면 $(document).ready(function(){ ... });내에 작성하셔도 됩니다.

<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: '.swiper-pagination',

    // Navigation arrows
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    // And if we need scrollbar
    scrollbar: '.swiper-scrollbar',
  })
  </script>

JOS39 블로그

여행과 맛집 그리고 일상에 대해 나만 몰랐던 이야기들..