jQueryを使わないスワイプ対応のjavascriptスライダーSwiper の使い方

jQueryを使っていないのでフリクションしにくいのも利点。入れ子でスライダーが組めるところが便利です。

【使い方（Usage）】

1. GitHubから最新バージョンのSwiperをダウンロードする。 [Swiper
](https://github.com/nolimits4web/Swiper)
2. 下記をHTMLに記載

```html
<head>
  ....
  <link rel="stylesheet" href="cssまでのパス/idangerous.swiper.css">
  <script defer src="JAVASCRIPTまでのパス/idangerous.swiper-2.x.min.js"></script>
  ....
</head>

<body>
<div class="swiper-container">
  <div class="swiper-wrapper">
      <!--First Slide-->
      <div class="swiper-slide"> 
        <!-- ここにスライド１の内容を好きなように設置する -->
      </div>
      
      <!--Second Slide-->
      <div class="swiper-slide">
        <!-- ここにスライド２の内容を好きなように設置する -->
      </div>
      
      <!--Third Slide-->
      <div class="swiper-slide"> 
        <!-- ここにスライド３の内容を好きなように設置する -->
      </div>
      <!--Etc..-->
  </div>
</div>
</body>
```

　3. CSSのidangerous.swiper.cssを開いて、Swiper部分の高さを設定（ファイルの最後のほうにある）

```:.css
/* Specify Swiper's Size: */
.swiper-container, .swiper-slide {
  width: 500px;
  height: 200px;
}
```

4.Initialize（初期化） ドキュメントが読み込まれたとき (もしくはウィンドウがロードされたとき)Swiperを走らせる

```html:.js
<script type="text/javascript">
/*======
ドキュメントレディかウィンドウがロードされてから使用すること
例:
jQueryだったら: $(function() { ...code here... })

もしくはJavaScriptのみでwindowがloadされたときにスタートさせるなら
window.onload = function() { ...code here ...}

もしくはJavaScriptのみでdocumentがreadyになったときにスタートさせるなら
document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)

という感じで
=======*/

/*
jQueryまたはZeptoの場合。
*/
$(function(){
  var mySwiper = $('.swiper-container').swiper({
    //オプションをここに:
    mode:'horizontal',
    loop: true
    //etc..
  });
})

/* 上か下かのどちらかを記述する。jQueryを使っていない人は↓こちらだけ。使っている人は↑だけ。 */

window.onload = function() {
  var mySwiper = new Swiper('.swiper-container',{
    //オプションをここに:
    mode:'horizontal',
    loop: true
    //etc..
  });  
}
</script>

```

5.完了　


【オプション一覧】

<table class="params" style="width: 100%;">
<thead>
<tr>
<th>パラメータ</th>
<th>タイプ</th>
<th>デフォルト値</th>
<th>記入例</th>
<th>解説</th>
</tr>
</thead>
<tbody>
<tr>
<td>speed</td>
<td>数値</td>
<td>300</td>
<td>600</td>
<td>スライドアニメーション間隔の秒数（ミリ秒）
</td>
</tr>
<tr>
<td>autoplay</td>
<td>数値</td>
<td>5000</td>
<td>-</td>
<td>オートプレイの時の間隔秒数（ミリ秒）。この値がないときはオートプレイしない。</td>
</tr>
<tr>
<td>mode</td>
<td>文字列</td>
<td>'horizontal'</td>
<td>'vertical'</td>
<td>horizontallyで水平（横）スライド、verticallyで垂直（縦）スライド。 </td>
</tr>
<tr>
<td>loop</td>
<td>真偽</td>
<td>false</td>
<td>true</td>
<td><strong><em>true</em></strong>でループ。デフォルトはループしない。</td>
</tr>
<tr>
<td>loopAdditionalSlides</td>
<td>数値</td>
<td>0</td>
<td>2</td>
<td>ループの後に、いくつのクローンを用意するかの数値。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>slidesPerView</td>
<td>数値<br />or<br />'auto'</td>
<td>1</td>
<td>4</td>
<td>スライドコンテナに何枚表示させたいか。（<em><strong>carousel mode</strong></em>）autoもサポートしていて、コンテナの幅によってフィットする。ループと共用できない。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>slidesPerGroup</td>
<td>数値</td>
<td>1</td>
<td>2</td>
<td>いくつのスライドでグループ化するか。デフォルトは1。<em><strong>carousel mode</strong></em>との組み合わせで便利。</td>
</tr>
<tr>
<td>calculateHeight</td>
<td>真偽</td>
<td>false</td>
<td>true</td>
<td><strong> <em>true</em> </strong>にすると、コンテナの高さを計算してスライド毎に高さ設定してくれる。レスポンシブレイアウトや高さが不確定な場合には便利。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>updateOnImagesReady</td>
<td>boolean</td>
<td>true</td>
<td>false</td>
<td>すべての画像がロードされたあとで初期化（構築？）されるようにする。 <span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>releaseFormElements</td>
<td>boolean</td>
<td>true</td>
<td>false</td>
<td>フォーム要素を許可するかしないか。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>watchActiveIndex</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>
 If enabled the Swipe recalculates activeIndex dynamically during touch interactions <span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>visibilityFullFit</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>trueのとき、表示されているスライドで、表示領域を隙間なく埋める。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>autoResize</td>
<td>boolean</td>
<td>true</td>
<td>false</td>
<td>ブラウザのウィンドウサイズによって自動リサイズをするかしないか。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>resizeReInit</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>ウィンドウサイズが変更されるたびに再構築するかしないか。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>DOMAnimation</td>
<td>boolean</td>
<td>true</td>
<td>false</td>
<td>custom DOMでのアニメーションをさせるかさせないか。css transitionsができないIE7～9などのため。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>resistance</td>
<td>boolean<br /> or<br /> '100%'</td>
<td>true</td>
<td>false</td>
<td>falseで跳ね返り禁止。100%をセットすると無制限に跳ね返る。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>noSwiping</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>trueにして、"noSwipingClass" をスライドに与えればスワイプできなくなる。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>preventLinks</td>
<td>boolean</td>
<td>true</td>
<td>false</td>
<td>スライド中にクリックがされないようにするかしないか。</td>
</tr>
<tr>
<td>initialSlide</td>
<td>number</td>
<td>2</td>
<td>0</td>
<td>先頭スライドを番号で指定する。</td>
</tr>
<tr>
<td>useCSS3Transforms</td>
<td>boolean</td>
<td>true</td>
<td>false</td>
<td>falseを設定すると、CSS3でアニメーションさせないようにできる。ただしposition(left:top)を使っての再現になるので、クォリティを保つためにパフォーマンスが低下する。ときどきCSS3でうまく動かないデバイスがあったりするので、そのときはfalseにしてみてね。</td>
</tr>
<tr>
<td class="options-group" colspan="5">フリーモードとスクロールコンテナ関連(Free Mode and Scroll Container)</td>
</tr>
<tr>
<td>freeMode</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>各スライドの位置を固定しないでフリーにするかしないか。</td>
</tr>
<tr>
<td>freeModeFluid</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>スライドからカーソル、タッチを離してもしばらくイージングするかしないか。</td>
</tr>
<tr>
<td>scrollContainer</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td><strong> <em>true</em> </strong>をセットすると、スクロールエリアみたいな感じで使える。</td>
</tr>
<tr>
<td>momentumRatio</td>
<td>number</td>
<td>1</td>
<td>2</td>
<td>タッチを離した後の跳ね返り値。 <span class="new-in">New in 2.0</span></td>
</tr>
<tr>
<td>momentumBounce</td>
<td>boolean</td>
<td>true</td>
<td>false</td>
<td>falseで跳ね返り禁止。<span class="new-in">New in 2.0</span></td>
</tr>
<tr>
<td>momentumBounceRatio</td>
<td>number</td>
<td>1</td>
<td>2</td>
<td>跳ね返り効果の値。<span class="new-in">New in 2.0</span></td>
</tr>
<tr>
<td class="options-group" colspan="5">スライドのオフセット（ずらしたりするやつ）関連(Slides offset)</td>
</tr>
<tr>
<td>centeredSlides</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>アクティブなスライドが必ず真ん中にくるようにする。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>offsetPxBefore</td>
<td>number</td>
<td>0</td>
<td>100</td>
<td>一番最初のスライドをオフセット（引っ込めるとか）したいときに、左の境界線からの数値（ピクセル単位）を入れる。 <span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>offsetPxAfter</td>
<td>number</td>
<td>0</td>
<td>100</td>
<td>右側のスライドをオフセット（引っ込めるとか）したいときに、右の境界線からの数値（ピクセル単位）を入れる。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>offsetSlidesBefore</td>
<td>number</td>
<td>0</td>
<td>2</td>
<td>左端から何枚目までずらしてスタートさせるか。レスポンシブでスライドの幅がわからない場合に便利。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>offsetSlidesAfter</td>
<td>number</td>
<td>0</td>
<td>2</td>
<td>右端から何枚目までずらしてスタートさせるか。レスポンシブでスライドの幅がわからない場合に便利。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td class="options-group" colspan="5">タッチ、マウスの操作関連(Touch/mouse interactions)</td>
</tr>
<tr>
<td>touchRatio</td>
<td>number</td>
<td>1</td>
<td>0.8</td>
<td>Touch ratio</td>
</tr>
<tr>
<td>simulateTouch</td>
<td>boolean</td>
<td>true</td>
<td>false</td>
<td>trueのとき、タッチと同じような動作をマウスでも受け付ける。クリックとかドラッグでスライドを動かせる。</td>
</tr>
<tr>
<td>onlyExternal</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>trueにすると、API機能からしか操作できなくなる。タブ形式とかで使いやすい。</td>
</tr>
<tr>
<td>followFinger</td>
<td>boolean</td>
<td>true</td>
<td>false</td>
<td>falseのとき、タッチを離したときにスライドが動く。ホールドしている間はアニメーションさせないようにできる。 </td>
</tr>
<tr>
<td>grabCursor</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>trueにしたとき、マウスオンしたときにカーソルが「掴む」マークになる。ちょっとした気遣いですね。</td>
</tr>
<tr>
<td>shortSwipes</td>
<td>boolean</td>
<td>true</td>
<td>false</td>
<td>短いスワイプをさせたくないときにfalseを設定。 </td>
</tr>
<tr>
<td>moveStartThreshold</td>
<td>number</td>
<td>false</td>
<td>100</td>
<td>Threshold（しきい値）をピクセル単位での調整ができる。スワイプを動き出させるのに、どれくらいのスワイプ動作を必要とさせるか、という値。"touch distance"がこの値より低いと、動かない、そうだ。</td>
</tr>
<tr>
<td class="options-group" colspan="5">ナビゲーション関連(Navigation)</td>
</tr>
<tr>
<td>keyboardControl</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>キーボードのカーソルキー（矢印）で操作できるようにするか、しないか。</td>
</tr>
<tr>
<td>mousewheelControl</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>マウスホイールでスライドを操作せきるようにするか、しないか。</td>
</tr>
<tr>
<td class="options-group" colspan="5">ページネーション(Pagination)</td>
</tr>
<tr>
<td>pagination</td>
<td>string or HTML Element</td>
<td>-</td>
<td>'.my-pagination'</td>
<td>ページネーションのセレクター名を設定できる。例では「my-pagination」というクラスをページネーションタグに当てられる。もしくはHTML要素をいれてもいい。<span class="new-in">New in 2.0</span></td>
</tr>
<tr>
<td>paginationClickable</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>ページネーションボタンをクリックでスライド操作できるようにさせるか、しないか。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>paginationAsRange</td>
<td>boolean</td>
<td>true</td>
<td></td>
<td>trueのとき、ページネーションボタンが表示スライドと連動するように、Classがあてがわれる。２枚以上を同時表示させるスライドで効果的。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>createPagination</td>
<td>boolean</td>
<td>true</td>
<td>false</td>
<td>trueのとき、ページネーションを作成。たくさんのspanタグが生成され、各spanにswiper-pagination-switchというクラスがあてがわれ、カレントのスライドにはswiper-active-switchというクラスがあてがわれる。スタイルを当てるのに便利です。</td>
</tr>
<tr>
<td class="options-group" colspan="5">名づけ関連(Namespace)</td>
</tr>
<tr>
<td>wrapperClass</td>
<td>string</td>
<td>'swiper-wrapper'</td>
<td>'my-wrapper'</td>
<td>スワイパーを包んでいる大外のタグのクラスを指定できる。デフォルトは'swiper-wrapper'。</td>
</tr>
<tr>
<td>slideClass</td>
<td>string</td>
<td>'swiper-slide'</td>
<td>'my-slide'</td>
<td>各スライドのクラスを指定できる。複数のスライダーを設置していて、違うスタイルを当てたいときなどには便利。デフォルトは'swiper-slide'。</td>
</tr>
<tr>
<td>slideActiveClass</td>
<td>string</td>
<td>'swiper-slide-active'</td>
<td>'my-active-slide'</td>
<td>アクティブ中スライドのクラスを指定できる。デフォルトは'swiper-slide-active'。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>slideVisibleClass</td>
<td>string</td>
<td>'swiper-slide-visible'</td>
<td>'my-visible-slide'</td>
<td>表示中のスライドのクラスを指定できる。デフォルトは'swiper-slide-visible'。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>slideElement</td>
<td>string</td>
<td>'div'</td>
<td>'li'</td>
<td>スライドのタグはデフォルトでdivを使用しているが、変更も可能。例ではliに変えている。</td>
</tr>
<tr>
<td>noSwipingClass</td>
<td>string</td>
<td>'swiper-no-swiping'</td>
<td>'stop-swiping'</td>
<td> CSS class of html element that will be used to prevent swiping when "noSwiping" parameter is set to true. <span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>paginationElement</td>
<td>string</td>
<td>'span'</td>
<td>'div'</td>
<td>ページネーションのボタンのタグはデフォルトでspanを使用しているが、変更も可能。例ではdivに変えている。</td>
</tr>
<tr>
<td>paginationElementClass</td>
<td>string</td>
<td>'swiper-pagination-switch'</td>
<td>'my-switch'</td>
<td>ページネーションスウィッチのクラス変更が可能。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>paginationActiveClass</td>
<td>string</td>
<td>'swiper-active-switch'</td>
<td>'my-active-switch'</td>
<td>ページネーションのアクティブボタンのクラス変更が可能。</td>
</tr>
<tr>
<td>paginationVisibleClass</td>
<td>string</td>
<td>'swiper-visible-switch'</td>
<td>'my-visible-switch'</td>
<td>ページネーションの表示中ボタンのクラス変更が可能。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td class="options-group" colspan="5">コールバック関連(Callbacks) ※動作完了時に呼び出す場合とかに</td>
</tr>
<tr>
<td>queueStartCallbacks</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>"true"で、"slideChangeStart"を加える。"slideChangeStart"は、multiple swipes/transitionsをしているときに発生するコールバック。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>queueEndCallbacks</td>
<td>boolean</td>
<td>false</td>
<td>true</td>
<td>"true"で、"slideChangeEnd"を加える。"slideChangeStart"は、multiple swipes/transitionsの直後に発生するコールバック。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>onFirstInit</td>
<td>function</td>
<td>-</td>
<td>function(swiper){ do something }</td>
<td>最初の初期化の直後に発生するコールバック。functionを書き込むことで実行。 <span class="new-in">New in 2.1</span></td>
</tr>
<tr>
<td>onInit</td>
<td>function</td>
<td>-</td>
<td>function(swiper){ do something }</td>
<td>すべての初期化、再初期化の直後に発生するコールバック。functionを書き込むことで実行。<span class="new-in">New in 2.1</span> </td>
</tr>
<tr>
<td>onTouchStart</td>
<td>function</td>
<td>-</td>
<td>function(swiper){ do something }</td>
<td>タッチしたら発生するコールバック。functionを書き込むことで実行。</td>
</tr>
<tr>
<td>onTouchMove</td>
<td>function</td>
<td>-</td>
<td>function(swiper){ do something }</td>
<td>
タッチが動いたら発生するコールバック。functionを書き込むことで実行。</td>
</tr>
<tr>
<td>onTouchEnd</td>
<td>function</td>
<td>-</td>
<td>function(swiper){ do something }</td>
<td>タッチを離したら発生するコールバック。functionを書き込むことで実行。</td>
</tr>
<tr>
<td>onSlideReset</td>
<td>function</td>
<td>-</td>
<td>function(swiper){ do something }</td>
<td>タッチを離してカレントアクティブスライドがリセットされたら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。</td>
</tr>
<tr>
<td>onSlideChangeStart</td>
<td>function</td>
<td>-</td>
<td>function(swiper){ do something }</td>
<td>前後へのスライドが始まったら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。</td>
</tr>
<tr>
<td>onSlideChangeEnd</td>
<td>function</td>
<td>-</td>
<td>function(swiper){ do something }</td>
<td>前後へのスライドが終わったら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。</td>
</tr>
<tr>
<td>onSlideClick</td>
<td>function</td>
<td>-</td>
<td>function(swiper){ do something }</td>
<td>スライド上でクリックされたら発生するコールバック。functionを書き込むことで実行。</td>
</tr>
<tr>
<td>onSlideTouch</td>
<td>function</td>
<td>-</td>
<td>function(swiper){ do something }</td>
<td>スライド上でタッチした直後に発生するコールバック。functionを書き込むことで実行。<em>onTouchStart</em>とほとんど同じだが、<strong>.clickedSlide</strong>と<strong>.clikedSlideIndex</strong>の値を返す。<br />
function(swiper){ alert(swiper.clikedSlideIndex); }とでもしたら動くはず。</td>
</tr>
<tr>
<td>onImagesReady</td>
<td>function</td>
<td>-</td>
<td>function(swiper){ do something }</td>
<td>係るすべての画像がロードされたら発生するコールバック。functionを書き込むことで実行。"updateOnImagesReady"もtrueとするべき。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>onMomentumBounce</td>
<td>function</td>
<td>-</td>
<td>function(swiper){ do something }</td>
<td>跳ね返りしたら発生するコールバック。functionを書き込むことで実行。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>onResistanceBefore</td>
<td>function</td>
<td>-</td>
<td>function(swiper,p){ do something }</td>
<td>跳ね返りしている間に発生するコールバック。functionを書き込むことで実行。<strong>p</strong>から跳ね返った距離の返り値を得られる。<span class="new-in">New in 2.0</span>.</td>
</tr>
<tr>
<td>onResistanceAfter</td>
<td>function</td>
<td>-</td>
<td>function(swiper,p){ do something }</td>
<td>跳ね返りした後に発生するコールバック。functionを書き込むことで実行。<strong>p</strong>から跳ね返った距離の返り値を得られる。<span class="new-in">New in 2.0</span>.</td>
</tr>
</tbody>
</table>