フリック、スワイプで動作するのでPCではデモが見れないです。

1
2
3
4
5
6
7
8
9
10
11
12

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/slideToucher.css" rel="stylesheet" />
<link href="<PATH>/demo.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/slideToucher.js"></script>
<script>
	$(window).load(function(){
		$('#slides').slideToucher({
			vertical: true,
			horizontal: true
		});
		setTimeout(function(){
			$('#slideToucher .arrow').fadeOut(1000, function(){
				$(this).remove();
			})
		}, 2000);
	});
</script>
<p class="title">フリック、スワイプで動作するのでPCではデモが見れないです。</p>
<div id="slideToucherDemo">
	<span class="arrow left"></span>
	<span class="arrow right"></span>
	<span class="arrow top"></span>
	<span class="arrow bottom"></span>
	<section id="slides">
		<div class="row">
			<article class="slide" id="rainbow01">1</article>
			<article class="slide" id="rainbow02">2</article>
			<article class="slide" id="rainbow03">3</article>
			<article class="slide" id="rainbow04">4</article>
		</div>	
		<div class="row">
			<article class="slide" id="rainbow05">5</article>
			<article class="slide" id="rainbow06">6</article>
			<article class="slide" id="rainbow07">7</article>
			<article class="slide" id="rainbow08">8</article>
		</div>
		<div class="row">
			<article class="slide" id="rainbow09">9</article>
			<article class="slide" id="rainbow10">10</article>
			<article class="slide" id="rainbow11">11</article>
			<article class="slide" id="rainbow12">12</article>
		</div>		
	</section>
</div>

slideToucherについて

slideToucherは、上下左右方向へのスワイプ、スライドを実装できるプラグインです。
PCでも使えますが、スマホ向けですね。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • AnimateScroll

    AnimateScroll

    よくあるページのトップにスクロールで戻る系

  • scrollUp

    scrollUp

    ページを一定量スクロールすると、ページトップへ戻るボタンを表示

  • onepageScroll

    onepageScroll

    1ページ単位でのスクロールを実装できる

  • localScroll

    localScroll

    格子状に配置した要素間をダイナミックにスクロールしてくれる

  • TiltedPage

    TiltedPage

    TiltedPageは、3Dで奥行き感のあるスクロールを表現できる