要素を無限スクロールさせる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.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オプションで増やすことができます。
ブログ記事のコメント欄かGithubへのPull RequestやIssuesでお願いします。
当プラグインを使用して発生した損害やトラブルにつきましては一切の責任を負いません。
ご自身の責任と判断の上でご利用ください。
MIT licenseです。
商用・非商用問わずご自由にご利用ください。Wood-Roots:blog