Swiper

Swiper is the most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers

Name	Version	License	Repository
Swiper	3.2.7	MIT	http://www.idangero.us/swiper/

Contents
Usage
Multi swiper
Call modal in the swiper
Options
- Slides per view
- Pager
Events
Examples

Usage

Extension Import

<link href="path/to/swiper.css" rel="stylesheet">

<script src="path/to/rc-swiper.js"></script>

Initialize

One way to initialize all swiper on a page would be to select them by data-extension attribute:

$(function () {
  RC_initSwiper()
})

Markup

Create a basic markup

<div class="swiper-container" data-extension="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide" role="button">Slide 1</div>
    <div class="swiper-slide" role="button">Slide 2</div>
    <div class="swiper-slide" role="button">Slide 3</div>
    ....
  </div>

  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

Multi swiper

Multi swiper in single page

Via data attributes

<!-- first swiper -->
<div class="swiper-container" data-extension="swiper">
  ...
</div>

<!-- Second swiper -->
<div class="swiper-container" data-extension="swiper">
  ...
</div>

or Via JavaScript

$('mySelector1').RC_initSwiper(option)

$('mySelector2').RC_initSwiper(option)

.swiper-slide 에서 컨포넌트 호출시에 Swipe와 Tap 제스츄어가 중복으로 적용됩니다. 충돌을 회피하기 위해 data-toggle 대신 data-component 를 사용합니다.

<div class="swiper-slide" data-component="modal">Slide 1</div>

Options

아래는 RC Swiper 에서 제공하는 Options 항목이며 적용방법은 .swiper-container div 에 data- 속성을 사용해서 마크업 해주면 된다. (추가적인 Option 항목은 Swiper 공식 페이지에서 제공하는 Swiper Parameter 항목 기준으로 커스터마이징이 필요하다.)

Name	Type	Default	Description
direction	horizontal \| vertical	horizontal	슬라이더 배열 방향 (가로 or 세로)
speed	number	300	Swipe 동작의 속도를 의미
spaceBetween	number	0	슬라이더 간의 간격
slidesPerView	number \| auto	1	출력 되는 슬라이더 수
pagination	boolean	false	페이징 출력 여부
paginationClickable	boolean	true	Pagination 버튼 클릭시 Swipe 이벤트를 발생시킬지 여부
pager	boolean	false	Prev & Next 버튼 출력 여부.
scrollbar	boolean	false	Scrollbar 생성 여부.
effect	slide \| fade \| cube \| coverflow \| flip	slide	슬라이더 트랜지션 효과
loop	boolean	false	loop 적용 여부
autoplay	number	-	값이 없는 경우 autoplay 는 적용되지 않는다. 값이 설정된 경우 설정된 시간(ms)에 맞춰 autoplay 가 적용된다.
centeredSlides	boolean	false	True 일 경우 활성화된 슬라이더가 중앙에 위치하게 된다.

Slides per view

한 화면에 출력 되는 슬라이더 아이템 수량을 설정합니다.

Via data attributes

<div class="swiper-container" data-extension="swiper" data-slidesPerView="3" data-spaceBetween="10">
  <div class="swiper-wrapper">
    ...
  </div>
</div>

OR Via JavaScript

$('mySelector').RC_initSwiper({
  slidesPerView: '3',
  spaceBetween:  '10'
});

좌우로 navigation buttons 을 출력합니다.

<div class="swiper-container" data-extension="swiper">
  <div class="swiper-wrapper">
    ....
  </div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>

Events

Name	Description
onInit(swiper)	Callback function, will be executed right after Swiper initialization
onSlideChangeStart(swiper)	Callback function, will be executed in the beginning of animation to other slide (next or previous). Receives swiper instance as an argument.
onSlideChangeEnd(swiper)	Callback function, will be executed after animation to other slide (next or previous). Receives slider instance as an argument.

Examples

Swiper on push

Customized Pagination

$('mySelector').RC_initSwiper({
  pagination: '.custom-pagination',
})

Fraction Pagination

Progress Pagination

Slide change event

onSlideChangeEnd 이벤트를 활용하여 특정 슬라이드에서 버튼을 출력 함.

$('mySelector').RC_initSwiper({
  onSlideChangeEnd: function(swiper) {
    if (swiper.activeIndex == 0) {
      $('#start').removeClass("active");
    } else {
      $('#start').addClass("active");
    }
  }
})

Extensions