簡単にスワイプ処理を作成出来るライブラリ「Swipe」

「Swip」はiPhoneなどでスワイプを行うとページを切り替える様な処理が簡単に実装出来るライブラリです。

使い方

主な記述は以下の様になります。ここがスワイプ可能な部分になります。

<div id='slider'>
  <ul>
    <li style='display:block'><div>1</div></li>
    <li style='display:none'><div>2</div></li>
    <li style='display:none'><div>3</div></li>
    <li style='display:none'><div>4</div></li>
    <li style='display:none'><div>5</div></li>
  </ul>
</div>

ライブラリはCSSとJSファイルで出来ています。

CSSファイルはheadタグ内で読み込み

<link href='style.css' rel='stylesheet'/>

JSファイルはbodyタグの閉じタグの直前で読み込みます。その後、Swipeオブジェクトを生成し、JSでの処理を実行します。この時にスワイプ処理をしたいタグのIDの要素を引数とします。

<script src='swipe.js'></script>
<script>
new Swipe(document.getElementById('slider'));
</script>

こちらで試せます。iPhoneのSafariなどで開くとスワイプで切り替えが可能です。なお、マウスでは出来ないみたいです。 prev や next のリンクをクリックして切り替える事は可能みたいです。

この様に記述すると画像ファイルをスワイプする事も可能です。 style='width:300px' の部分を画像より大きい値に変更するのを忘れない様にして下さい。

<div id='slider' class='swipe' style='width:300px'>
  <ul>
    <li style='display:block'><img src="../images/img01.jpg"></li>
    <li style='display:none'><img src="../images/img02.jpg"></li>
    <li style='display:none'><img src="../images/img03.jpg"></li>
    <li style='display:none'><img src="../images/img04.jpg"></li>
    <li style='display:none'><img src="../images/img05.jpg"></li>
  </ul>
</div>

サンプルはこちら

タイマーと組み合わせると自動的にめくられる様にも出来ます。

var slider = new Swipe(document.getElementById('slider'));
setInterval(function() {
  slider.next();
}, 3000);

サンプルはこちら。3秒間隔で画像が切り替わります。

強火で進め

このブログではプログラム関連の記事を中心に書いてます。

簡単にスワイプ処理を作成出来るライブラリ「Swipe」

使い方

関連情報