画像のみ
$('.scroll1').infiniteslide();
要素を無限スクロールさせる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は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.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({
//オプションを書く
});
});スライドの速さを指定します。単位はpx/秒です。
スライドの向きを指定します。
「left」「right」「up」「down」から選択して指定してください。
マウスオーバーで停止させるかどうかを選択します。「true」か「false」で指定してください。
trueの場合、ウインドウリサイズ時に幅や高さを再取得します。
スライドの子要素の幅や高さを%で指定している場合はtrueにしてください。
infiniteslide.js v2は無限のスクロールにするために子要素を複製して追加しますが、子要素の幅・高さが少ない場合は無限ループにならず途切れることがあります。その場合子要素の複製回数をcloneオプションで増やすことができます。
CSSだけで様々なレイアウトに対応できます。
スライド対象要素をCSSでdisplay: none;しておいてください。
画像ロード後にプラグインがdisplay:flex;に設定します。
子要素の数が足りないのかもしれません。
横方向へのスライドの場合、子要素の幅合計が想定ウインドウ幅以上でないと途切れます。
縦方向の場合、子要素の高さ合計が想定ウインドウ高さ以上が必要です。
そんなに子要素たくさん用意できないよ！という場合、cloneオプションを2以上にしてください。
ブログ記事のコメント欄かGithubへのPull RequestやIssuesでお願いします。
当プラグインを使用して発生した損害やトラブルにつきましては一切の責任を負いません。
ご自身の責任と判断の上でご利用ください。
MIT licenseです。
商用・非商用問わずご自由にご利用ください。Wood-Roots:blog