Infiniteslide.js v2

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

対応ブラウザ

Flexboxと@keyframeを使用してるため、IE10以上、Android4.4以上に対応します。

ダウンロード

GitHub

画像のみ


$('.scroll1').infiniteslide();

画像とテキストが混合した要素

たとえば商品バナーのような

おすすめ商品を

写真と文字セットで

たくさん見せることができます

通販サイトだけでなく

ブログのおすすめ記事に使うのも

いいかもしれませんね。

 

$('.scroll2').infiniteslide({
	speed: 200,
	direction: 'right'
});

縦型


$('.scroll3').infiniteslide({
	speed: 300,
	direction: 'down'
});

文字だけ(ホバーしても停止しない）


$('.scroll4').infiniteslide({
	pauseonhover: false
});

高さが異なる場合


$('.scroll5').infiniteslide({
	speed: 50
});

スライドはalign-items: center;になっています。
上揃え、下揃えにしたい場合はalign-items:flex-start !important;やalign-items:flex-end !important;にしてください。

レスポンシブ対応


$('.scroll6').infiniteslide({
	speed: 200,
	responsive: true
});

枚数が足りない場合

HTML上は2枚の画像しかありませんが、clone:10と指定することで20枚の画像が追加されます。
子要素が少ないときにご利用ください。 


$('.scroll7').infiniteslide({
	direction: 'right',
	clone: 10
});

基本的な使い方

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

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

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

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

<!-- divの場合 -->
<div class="infiniteslide">
	<div class="item">
		<h3>テキストテキスト</h3>
		<img src="img/img1.jpg" alt="" />
	</div>
	<div class="item">
		<h3>テキストテキスト</h3>
		<img src="img/img1.jpg" alt="" />
	</div>
	<div class="item">
		<h3>テキストテキスト</h3>
		<img src="img/img1.jpg" alt="" />
	</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オプションで増やすことができます。

カスタマイズ

CSSだけで様々なレイアウトに対応できます。

縦スクロールで画面端に設置

DEMO

要素同士のマージンを取る

DEMO

トラブルシューティング

画像を使った場合、ロード時に一瞬画像が縦並びで表示されてしまう

スライド対象要素をCSSでdisplay: none;しておいてください。
画像ロード後にプラグインがdisplay:flex;に設定します。

スライドがループにならない

子要素の数が足りないのかもしれません。
横方向へのスライドの場合、子要素の幅合計が想定ウインドウ幅以上でないと途切れます。
縦方向の場合、子要素の高さ合計が想定ウインドウ高さ以上が必要です。

そんなに子要素たくさん用意できないよ！という場合、cloneオプションを2以上にしてください。

バグ報告やご要望

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

免責

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

ライセンス

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