skplanet / sweetswipe

swipe javascript ui component

SweetSwipe

A lightweight swiping(flicking) mobile web component.

## Demo

• Base demo
• Circular demo

## Feature

• lightweight (vanillaJS)
• CSS3 based fast animation
• multiple options and plugins

## Compatibility

Device	Browser
Desktop	IE9+, FF, Chrome, Safari
Mobile	Android 4.x, Chrome, Safari

## Install

• npm install
• gulp buildJS (ES6 -> ES5)
• import script

<script src="../dist/swipe_merge_es5.js"></script>

Install using Bower

• bower install sweetswipe

## Usage - HTML

   <div class="viewArea">
        <div id="swipeWrap">
            <div>menu1-list</div>
            <div>menu2-list </div>
            <div>menu3-list </div>
        </div>
    </div>

Usage - CSS

	.viewArea {
        overflow: hidden;
        height: 200px;
    }

    #swipeWrap {
        position : relative;
        width :100%;
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }

    #swipeWrap div {
        width :100%;
        position: absolute;
        top: 0;
        height: 200px;
    }

    #swipeWrap div:nth-child(1) {
        transform: translate3d(0%, 0px, 0px);
        -webkit-transform: translate3d(0%, 0px, 0px);
        background-color: red;
    }
    #swipeWrap div:nth-child(2){
        background-color: green;
        transform: translate3d(0%, 0px, 0px);
        -webkit-transform: translate3d(100%, 0px, 0px);
    }
    #swipeWrap div:nth-child(3){
        transform: translate3d(200%, 0px, 0px);
        -webkit-transform: translate3d(200%, 0px, 0px);
        background-color: blue;
    }

## Usage - JavaScript

  var oMyswipe = new SweetSwipe($("#swipeWrap"), {
      'bCircular': true,
      'nDuration': 100,
      'nBackWidth': 60,
      'nSideWidth': 20,
      'nDecisionSlope': 0.8,
      'nForcedSwipeTime': 100,
      'bSettingScreenHeight': false,
      'bMouseEventSupport': true
    });

## Options

Option	Description
bCircular	A boolean that circulate swipe gesture
nDuration	A milisecond during swiping animation
nBackWidth	A touchmove moving distance that can be executed swiping
nSideWidth	A dummy width to show at first and last panel
nDecisionSlope	A touchmove slope that can be executed swiping
nForceSwipeTime	A milisecond that can be executed swiping regardless of touch moving distance
bSettingScreenHeight	A boolean that set content height whenever end of swiping animation
bMouseEventSupport	A boolean that can be executed swiping by mouse events

## Custom function You can register custom function that executed at specific point of time.

Custom function	Description	Parameter
FN_BEFORE_SWIPE	Before swiping	current panel order (0~n)
FN_AFTER_SWIPE	After swiping	current panel order (0~n)
FN_COMPONENT_DID_LOAD	After component initialization

Usage

    oMyswipe.registerUserMethod({
      'FN_BEFORE_SWIPE': function(n){},
      'FN_AFTER_SWIPE': function(n){},
      'FN_COMPONENT_DID_LOAD' : function(){console.log("end of component init");}
    });

## API | Function | Description | return | Parameter | | -------- | ----------- | ------ | --------- | | getCurrentViewNumber() | Get panel order number | Number(0~n) : panel order | | | runSwipeAction(n,n) | Move to specific panel | | Number(millisecond) : anmation duration , Number : panel order to move(0~n) |
## Usage of Circular swiping

JavaScript

   'bCircular': true,

HTML

You have to add two cloned elements (first and last element). If your page's swiping panel is three, you have to add elements as follows. "1234 -> 412341" The reason for this is to minimize a reflow.

Reference code : go to demo page

CSS

 #swipeWrap > div:nth-child(1) {
                -webkit-transform: translate3d(-100%, 0px, 0px);
            }
            #swipeWrap > div:nth-child(2){
                -webkit-transform: translate3d(0%, 0px, 0px);
            }
            #swipeWrap > div:nth-child(3){
                -webkit-transform: translate3d(100%, 0px, 0px);
            }

            #swipeWrap > div:nth-child(4){
                -webkit-transform: translate3d(200%, 0px, 0px);
            }

            #swipeWrap > div:nth-child(5){
                -webkit-transform: translate3d(300%, 0px, 0px);
            }

            #swipeWrap > div:nth-child(6){
                -webkit-transform: translate3d(400%, 0px, 0px);
            }

## Plugin - SwipeNavigationPlugin Tab menu navigation UI.

  <ul>
    <li class="selected-swipe-li"><a href="#">first</a></li>
    <li class="mockclass"><a href="#">two</a></li>
    <li><a href="#">third</a></li>
    <li><a href="#">fourth</a></li>
  </ul>

  oMyswipe.onPlugins([
    { 
     'name': 'SwipeNavigationPlugin',
     'option': {
       'usage': true,
       'elNaviWrap': document.querySelector("#swipeNaviWrap > ul"),
       'seletedClassName': 'selected-swipe-li',  // CSS class name of selected element.
       'nDuration': 200,   //swipe animation duration(millisecond).
       'bMouseEventSupport': true  //click event support
      },
      'userMethod' : {}
    }
  ]);

## Plugin - SwipeStepMoverPlugin Button menu navigation UI

  <div class="buttonNavi">
    <button class="swipe-prev"><</button>
    <button class="swipe-next">></button>
  </div>

  oMyswipe.onPlugins([
    'name'      : 'SwipeStepMoverPlugin',
    'option'    : {
      'prevButton' : document.querySelector(".swipe-prev"),
      'nextButton' : document.querySelector(".swipe-next"),
      'nDuration': 200
    },
    'userMethod' : {}
  ]);

## Test unit test page
## Contributing See our [CONTRIBUTING.md](https://github.com/skplanet/sweetswipe/blob/master/CONTRIBUTING.md) for information on how to contribute.
## License MIT Licensed. Copyright (c) 2016 SK PLANET. All Rights Reserved.

sweetswipe's Issues

commonUtil.js 쪽 질문 드립니다.

getTranslate3dX 함수에서 아래 코드 중 "+sPreCss"의 "+" 가 무슨의미인지 궁금하네요....
let nPreX = +sPreCss.replace(/translate3d((-\d+(?:.\d+))(px)*,.+)/g , "$1");