自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本インドアです!InstagramTwitterContactサーバーとドメインの同時取得で.jpが無料シュウ今回は【jQuery】画像を「無限ループ」させよう、infiniteslidev2の使い方!!の解説になります!こんな方に読んでほしいjQueryを学び始めた方へ画像を無限スクロールするプラグインの解説しております。今回はinfiniteslidev2について解説しております。今回は、infiniteslidev2についての解説になります。「infiniteslidev2」になりますが、今でも簡単で使いやすいプラグインになっております。イメージ図は上記のようになります。「infiniteslidev2」とは、画像を横並びにした際に、「無限にループ(流れ)」してくれます。設定もとても簡単で便利なプラグインの一つになっております。[記事の内容]infiniteslidev2について必要なファイルについて記述場所について「無限ループ」の設定について「無限ループ」ついて「スピード」ついて「方向」ついてオプションについてまとめinfiniteslidev2についてinfiniteslidev2とは、「画像を無限にループ(流れ)」のことを示します。jQueryが苦手な方でも問題ありません。下記のサイトから「infiniteslidev2」をダウンロードしましょう。ZIP」ボタンをクリック3必要なファイルについてダウンロード後に必要なファイルについて解説していきます。ファイル名の「infiniteslidev2-master」をご確認ください。「infiniteslidev2.js」の1点を使用します。type="text/javascript"></script>また、「infiniteslidev2」を使用する際には、infiniteslidev2を使用する宣言をしなければなりません。以下のコードを合わせて指定しましょう。$('.slide').infiniteslide();})</script>「infiniteslidev2.js」と繋げて記述するのが良いでしょう。ファイルの階層は、ご自身のフォルダに合わせてください。次に、jquery本体のプラグイン設置します。今回は2つ目のパターンを採用して解説します。2つ目は、ファイルをダウンロードせずに、「URL」から読み込むパターンになります。どちらでも問題ありません。$('.slide').infiniteslide();})</script>必ず、jquery本体のプラグイン上、infiniteslidev2を下に設置しましょう。jqueryをダウンロードしたい方は、こちらのリンクから。記述場所について基本的にはbody内に指定するようにしましょう。基本構造の書き方は以下のようになります。コンテンツが入ります。$('.slide').infiniteslide();})</script></body></html>「無限ループ」の設定について次に、「無限ループ」の設定について解説します。用意するのが画像のみになります。「無限ループ」ついてデモサイトはコチラから。基本構造の書き方は以下のようになります。$('.slide').infiniteslide();})基本、シンプルな設定になっております。次に、スピード、方向の順に解説していきます。「スピード」ついてデモサイトはコチラから。基本構造の書き方は以下のようになります。200});});HTMLは省略しております。スピードはデフォルトは100になっているため、「200」に変更した際は、ループが早くなります。「方向」ついてデモサイトはコチラから。基本構造の書き方は以下のようになります。'left'});});HTMLは省略しております。方向のデフォルトは、右から左になっています。directionの指定後、「left」「right」「up」「down」の4つの指定が可能です。オプションについて指定できる値speedループの速度を指定します。デフォルトは「100」、数値が大きいほど早くなります。directionループの方向を指定します。デフォルトは「右から左」、「left」「right」「up」「down」の4つの指定が可能です。pauseonhoverマウスオーバーをした際の動きを指定します。デフォルトは「true」、「false」に変更後はマウスを乗せた状態でも動きは止まりません。responsiveループをレスポンシブ対応する際に指定します。デフォルトは「false」、「true」に変更後はレスポンシブ対応が可能になります。※要素の横幅を必ず指定しておきましょう。こちらのサイトで他にも解説しております。まとめ今回はこれで以上です。POINTinfiniteslidev2とは、「画像を無限にループ(流れ)」のことを示します。必要なファイルはinfiniteslidev2.jsの1点になります。オプションを試してみてください。こちらにデモサイトを用意しました。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。