SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

今回は、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」に変更後はレスポンシブ対応が可能になります。
    ※要素の横幅を必ず指定しておきましょう。

こちらのサイトで他にも解説しております。

まとめ

今回はこれで以上です。

POINT
  • infiniteslidev2とは、「画像を無限にループ(流れ)」のことを示します。
  • 必要なファイルはinfiniteslidev2.jsの1点になります。
  • オプションを試してみてください。
  • こちらにデモサイトを用意しました。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top