今回は【jQuery】画像を「無限ループ」させよう、infiniteslidev2の使い方!!
の解説になります!
こんな方に読んでほしい
- jQueryを学び始めた方へ
- 画像を無限スクロールするプラグインの解説しております。
- 今回はinfiniteslidev2について解説しております。
今回は、infiniteslidev2についての解説になります。
「infiniteslidev2」になりますが、今でも簡単で使いやすいプラグインになっております。
イメージ図は上記のようになります。
「infiniteslidev2」とは、画像を横並びにした際に、「無限にループ(流れ)」してくれます。
設定もとても簡単で便利なプラグインの一つになっております。
infiniteslidev2について
infiniteslidev2とは、「画像を無限にループ(流れ)」のことを示します。
jQueryが苦手な方でも問題ありません。
まずは下記のサイトから「infiniteslidev2」をダウンロードしましょう。
必要なファイルについて
ダウンロード後に必要なファイルについて解説していきます。
まずは、ファイル名の「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に関する様々な情報を発信しています。
最新記事
関連記事