ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2021.01.25  最終更新日:2021.05.18

js / jQuery

画像等を無限ループさせることができるinfiniteslidev2 の使い方

要素を無限ループさせることができるとっても使いやすいjQueryプラグイン、infiniteslidev2の使い方メモです。

infiniteslidev2.jsの使い方手順

①ファイルのダウンロード

GitHubのinfiniteslidev2のページのダウンロードボタンを押下して、ファイルをダウンロードしてくる。
※緑の『Code』ボタンを押して表示される『Download ZIP』ボタンを押してダウンロードします。

②必要なファイルをサーバーにアップロードする

  • infiniteslidev2.js

ファイルを任意のフォルダにアップロードする。

※minファイルではないファイルも準備されていますので、ご自身の用途に合わせてしようファイルをお選びください。

③ファイルを読み込む

※infiniteslidev2.jsより先にjqueryファイルを読み込みます。
※ファイルのパスはご自身の環境に合わせて書き換えてください。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <script src="js/jquery.min.js"></script>
    <script src="js/infiniteslidev2.js"></script>
  </head>
  <body>
  </body>
</html>

④HTML、JSに必要な記述をする

HTML

今回は画像を8枚横並びにして無限スクロールさせる想定です。

<div>
	<ul class="infiniteslide">
	  <li><img src="img/img_01.jpg" alt="" /></li>
	  <li><img src="img/img_02.jpg" alt="" /></li>
	  <li><img src="img/img_03.jpg" alt="" /></li>
	  <li><img src="img/img_04.jpg" alt="" /></li>
	  <li><img src="img/img_05.jpg" alt="" /></li>
	  <li><img src="img/img_06.jpg" alt="" /></li>
	  <li><img src="img/img_07.jpg" alt="" /></li>
	  <li><img src="img/img_08.jpg" alt="" /></li>
	</ul>
</div>

JS

下記はオプション等なにも指定しない最もシンプルな書き方です。

$(function(){
  $('.infiniteslide').infiniteslide();
})

最低限の記述はこれだけでOKです。
以下にサンプルページをつくってみました。

infiniteslidev2.jsのオプション

direction : スクロールする向きを変える

デフォルトでは、右から左にスクロールしますが、スライドの向きを変更することができます。
書き方は以下の通りで、directionの後に、「left」「right」「up」「down」の中から用途に合わせて指定します。

$('.infiniteslide').infiniteslide({
	direction: 'right'
});

今、右から左に流れるサンプルです。

clone : 要素が少ない場合に要素を増やす

要素が少なくて無限ループにできない場合、cloneの値を変えて要素を増やすことができます。
(※左右横方向のループの場合、ループさせたい要素の幅の合計が、外枠orウィンドウの幅以上でないと途切れてしまうようです。)
デフォルトで、cloneは1になっていますが、ここの数字を変えることで、少ない要素でもループさせることができます。

例えば、画像は2枚しかないけど、この画像を無限にループさせたい場合、
以下のようなコードで要素の複製をつくり、無限にループさせることができます。

HTML

<div>
	<ul class="infiniteslide">
	  <li><img src="img/img_01.jpg" alt="" /></li>
	  <li><img src="img/img_02.jpg" alt="" /></li>
	</ul>
</div>

JS

$('.infiniteslide').infiniteslide({
	clone: 2
});

要素が2個しかない場合にcloneで要素を増やして無限ループしているサンプルです。

その他オプション

speed

スピードを変更できるオプション。
デフォルトは100で、それ以外に変更できます。
以下のように書き換えます。
※数字が大きいほど早くなります。

$('.infiniteslide').infiniteslide({
	speed: 200
});

pauseonhover

ループしている要素にマウスが乗ったとき(マウスオーバーしたとき)、ループを止めることができるオプションです。
デフォルトはtrueになっているので、以下のようにfalse書き換えると、マウスオーバーしてもループは止まりません。

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

responsive

レスポンシブ対応させたい場合に使用するオプションです。
デフォルトはfalseになっています。
なので、以下のように、responsive: trueとしてあげます。
※要素の横幅を指定している場合に使用できるオプションです。

$('.infiniteslide').infiniteslide({
	responsive: true,
	speed: 70,
	pauseonhover: true
});

以下、サンプルです。HTMLは最初に書いた画像8枚バージョンです。
※以下のサンプルでは、liのwidthを50%に指定してあります。実際に、ブラウザのサイズを変更し、レスポンシブに対応されているかご確認ください。

最新記事