スマホで水平垂直方向へのスワイプ、スライドが可能なjQueryプラグイン「jQuery slideToucher plugin」

スマホで水平垂直方向へのスワイプ、スライドが可能なjQueryプラグイン「jQuery slideToucher plugin」サンプル スマホで画像やコンテンツをスワイプさせて見せられると多くのコンテンツを遷移も少なくて良いかもしれません。
jQueryプラグインのslideToucherなら水平、垂直の両方向にスワイプさせられ便利です。

使用方法 Yuripetusko/slideToucher ? GitHubからファイル一式をダウンロード。
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="slideToucher.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("#slides").slideToucher({
vertical: true, //縦スクロール有効
horizontal: true //横スクロール有効
});
});
</script>

次に各スライドを記述します。
以下は4×4のコンテンツを表示させた場合です。
縦はrow横はarticleで記載します。
<section id="slides">
<div class="row">
<article class="slide"></article>
<article class="slide"></article>
<article class="slide"></article>
<article class="slide"></article>
</div>
<div class="row">
<article class="slide"></article>
<article class="slide"></article>
<article class="slide"></article>
<article class="slide"></article>
</div>
<div class="row">
<article class="slide"></article>
<article class="slide"></article>
<article class="slide"></article>
<article class="slide"></article>
</div>
</section>

最後にCSSを調整すれば完成です。
html, body {
width:100%;
height:100%;
margin:0;
}
#slides {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
}

スマホで水平垂直方向へのスワイプ、スライドが可能なjQueryプラグイン「jQuery slideToucher plugin」サンプル

sponsors

「スマホで水平垂直方向へのスワイプ、スライドが可能なjQueryプラグイン「jQuery slideToucher plugin」」をシェアする

記事作成:
記事URL:

TOP > > > スマホで水平垂直方向へのスワイプ、スライドが可能なjQueryプラグイン「jQuery slideToucher plugin」