無限スクロールInfiniteslide.js v2

要素を無限スクロールさせるjQueryプラグインです。CSS3 Animationを使用しているため、滑らかです。

対応ブラウザ

Flexboxと@keyframeを使用してるため、IE10以上、Android4.4以上に対応します
ダウンロード
GitHub

基本的な使い方

jQueryとinfiniteslidev2.jsをscriptタグで読み込みます。
jQueryは1.x、2.xで動作します。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="infiniteslidev2.js"></script>

スライドにしたい要素に好きなクラスを付けます。

<!-- たとえばulの場合 -->
<ul class="infiniteslide">
	<li><img src="img/img1.jpgalt="" /></li>
	<li><img src="img/img2.jpgalt="" /></li>
	<li><img src="img/img3.jpgalt="" /></li>
	<li><img src="img/img4.jpgalt="" /></li>
</ul>

<!-- divの場合 -->
<div class="infiniteslide">
	<div class="item">
		<h3>テキストテキスト</h3>
		<img src="img/img1.jpgalt="" />
	</div>
	<div class="item">
		<h3>テキストテキスト</h3>
		<img src="img/img1.jpgalt="" />
	</div>
	<div class="item">
		<h3>テキストテキスト</h3>
		<img src="img/img1.jpgalt="" />
	</div>
</div>

外部JSファイルやHTML内で実行します。

$(function(){
	$('.infiniteslide').infiniteslide({
		//オプションを書く
	});
});

オプション

speed

Type:
integral
Default:
100

スライドの速さを指定します。単位はpx/秒です。

direction

Type:
string
Default:
'left'

スライドの向きを指定します。
「left」「right」「up」「down」から選択して指定してください。

pauseonhover

Type:
boolean
Default:
true

マウスオーバーで停止させるかどうかを選択します。「true」か「false」で指定してください。

responsive

Type:
boolean
Default:
false

trueの場合、ウインドウリサイズ時に幅や高さを再取得します。
スライドの子要素の幅や高さを%で指定している場合はtrueにしてください。

clone

Type:
integral
Default:
1

infiniteslide.js v2は無限のスクロールにするために子要素を複製して追加しますが、子要素の幅・高さが少ない場合は無限ループにならず途切れることがあります。その場合子要素の複製回数をcloneオプションで増やすことができます。

バグ報告やご要望

ブログ記事のコメント欄かGithubへのPull RequestやIssuesでお願いします。

免責

当プラグインを使用して発生した損害やトラブルにつきましては一切の責任を負いません。
ご自身の責任と判断の上でご利用ください。

ライセンス

MIT licenseです。
商用・非商用問わずご自由にご利用ください。Wood-Roots:blog