【jQuery】画像を「無限ループ」させよう、infiniteslidev2の使い方!!

シュウ

今回は【jQuery】画像を「無限ループ」させよう、infiniteslidev2の使い方!!
の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
画像を無限スクロールするプラグインの解説しております。
今回はinfiniteslidev2について解説しております。

今回は、infiniteslidev2についての解説になります。
「infiniteslidev2」になりますが、今でも簡単で使いやすいプラグインになっております。

イメージ図は上記のようになります。
「infiniteslidev2」とは、画像を横並びにした際に、「無限にループ(流れ)」してくれます。
設定もとても簡単で便利なプラグインの一つになっております。

[記事の内容]

infiniteslidev2について

infiniteslidev2とは、「画像を無限にループ(流れ)」のことを示します。
jQueryが苦手な方でも問題ありません。
まずは下記のサイトから「infiniteslidev2」をダウンロードしましょう。

●infiniteslidev2にアクセス: 1https://github.com/woodroots/infiniteslidev2

●「Code」ボタンをクリック: 2

●「Download ZIP」ボタンをクリック: 3

必要なファイルについて

ダウンロード後に必要なファイルについて解説していきます。
まずは、ファイル名の「infiniteslidev2-master」をご確認ください。

●cssファイル: 1「infiniteslidev2-master」 > 「infiniteslidev2.js」の1点を使用します。

<!--js-->
<script src="js/infiniteslidev2.js" type="text/javascript"></script>

また、「infiniteslidev2」を使用する際には、infiniteslidev2を使用する宣言をしなければなりません。
以下のコードを合わせて指定しましょう。

<!--js-->
<script src="js/infiniteslidev2.js" type="text/javascript"></script>
<script>
$(function(){
  $('.slide').infiniteslide();
})
</script>

「infiniteslidev2.js」と繋げて記述するのが良いでしょう。
また、ファイルの階層は、ご自身のフォルダに合わせてください。

次に、jquery本体のプラグイン設置します。
今回は2つ目のパターンを採用して解説します。

● 1つ目は、ファイルをダウンロードして使用するパターン、
● 2つ目は、ファイルをダウンロードせずに、「URL」から読み込むパターンになります。
どちらでも問題ありません。

<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/infiniteslidev2.js" type="text/javascript"></script>
<script>
$(function(){
  $('.slide').infiniteslide();
})
</script>

必ず、jquery本体のプラグイン上、infiniteslidev2を下に設置しましょう。
jqueryをダウンロードしたい方は、こちらのリンクから。

記述場所について

基本的にはbody内に指定するようにしましょう。
基本構造の書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】画像を「無限ループ」させよう...</title>
</head>
<body>

　コンテンツが入ります。

<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/infiniteslidev2.js" type="text/javascript"></script>
<script>
$(function(){
  $('.slide').infiniteslide();
})
</script>
</body>
</html>

「無限ループ」の設定について

次に、「無限ループ」の設定について解説します。
用意するのが画像のみになります。

「無限ループ」ついて

デモサイトはコチラから。
基本構造の書き方は以下のようになります。

無限ループ

<ul class="slide">
	<li><img src="sample01.jpg" alt=""></li>
	<li><img src="sample02.jpg" alt=""></li>
	<li><img src="sample03.jpg" alt=""></li>
	<li><img src="sample04.jpg" alt=""></li>
	<li><img src="sample05.jpg" alt=""></li>
	<li><img src="sample06.jpg" alt=""></li>
</ul>

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

基本、シンプルな設定になっております。
次に、スピード、方向の順に解説していきます。

「スピード」ついて

デモサイトはコチラから。
基本構造の書き方は以下のようになります。

「スピード」ついて

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

HTMLは省略しております。
スピードはデフォルトは100になっているため、「200」に変更した際は、ループが早くなります。

「方向」ついて

デモサイトはコチラから。
基本構造の書き方は以下のようになります。

「方向」ついて

$(function(){
	$('.slide').infiniteslide({
		'speed': 50,
		'direction' : 'left'
	});
});

HTMLは省略しております。
方向のデフォルトは、右から左になっています。
directionの指定後、「left」「right」「up」「down」の4つの指定が可能です。

オプションについて

指定できる値

speed
ループの速度を指定します。
デフォルトは「100」、数値が大きいほど早くなります。
direction
ループの方向を指定します。
デフォルトは「右から左」、「left」「right」「up」「down」の4つの指定が可能です。
pauseonhover
マウスオーバーをした際の動きを指定します。
デフォルトは「true」、「false」に変更後はマウスを乗せた状態でも動きは止まりません。
responsive
ループをレスポンシブ対応する際に指定します。
デフォルトは「false」、「true」に変更後はレスポンシブ対応が可能になります。
※要素の横幅を必ず指定しておきましょう。