スマートフォンでスライダーを利用できる軽量JavaScript「Swipe JS」

スマートフォンでスライダーを利用できる軽量JavaScript「Swipe JS」サンプル スマートフォンで画像スライダーを利用する場面は多々あると思います。
これを実現する軽量JavaScript「Swipe JS」を紹介します。

使用方法 Swipe JS - a lightweight mobile web sliderからファイル一式をダウンロード。
<div id='slider'>
<ul>
<li style='display:block'></li>
<li style='display:none'></li>
<li style='display:none'></li>
</ul>
</div>

あとは最後に下記を記述すれば完成です。
<script src='swipe.js'></script>
<script>
new Swipe(document.getElementById('slider'));
</script>

またページャーのリンクは以下のように書くと表示されます。
<a href='#' onclick='slider.prev();return false;'>prev</a>
<a href='#' onclick='slider.next();return false;'>next</a>

なお、スマートフォン向けに下記のmeta記述が必要となります。
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
スマートフォンでスライダーを利用できる軽量JavaScript「Swipe JS」サンプル

sponsors

「スマートフォンでスライダーを利用できる軽量JavaScript「Swipe JS」」をシェアする

記事作成:
記事URL:

TOP > > スマートフォンでスライダーを利用できる軽量JavaScript「Swipe JS」