シュウ

公開日: 2021.10.08 / 更新日: 2026.10.13
今回は【jQuery】infiniteslidev2の使い方の解説になります！

こんな方に読んでほしい

• jQueryを学び始めた方
• 画像を無限ループさせるプラグインを探している方
• infiniteslidev2の設置方法とオプションを知りたい方

今回は、infiniteslidev2の使い方を解説します。設定が簡単で、今でも使いやすいプラグインです。画像を横並びにするだけで、「無限にループ（流れ）」する動きを実装できます。

完成イメージは上の画像のとおりです。この記事では、ダウンロードから基本の実装、オプション設定まで順番に解説します。

infiniteslidev2とは

infiniteslidev2とは、画像などの要素を「無限にループ（流れ）」させるjQueryプラグインです。jQueryが苦手な方でも、読み込みと1行の記述だけで動かせます。まずは下記の手順でダウンロードしましょう。

infiniteslidev2のダウンロード方法

必要なファイルについて

ダウンロードしたZIPを解凍すると、infiniteslidev2-masterフォルダが作成されます。使用するファイルは次の1点だけです。

jQuery本体とプラグインの読み込み

infiniteslidev2はjQueryのプラグインなので、jQuery本体の読み込みが必要です。jQueryの読み込み方法は次の2パターンがあります。

● 1つ目：jQueryのファイルをダウンロードして使用する
● 2つ目：ダウンロードせず、URL（CDN）から読み込む

どちらでも問題ありません。今回は2つ目のCDNパターンで解説します。jQueryをダウンロードしたい方は、こちらのリンクから入手できます。

<!--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を設置しましょう。順番が逆だとエラーになり、動作しません。

記述場所について

スクリプトは、基本的にbodyの閉じタグ直前にまとめて記述します。基本構造は以下のとおりです。

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

<!-- ここにコンテンツ（ul.slide など）が入ります -->

<!--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>

「無限ループ」の基本設定

ここからは、無限ループの基本設定を解説します。用意するのは画像だけです。デモサイトもあわせてご確認ください。

HTMLの記述

ループさせたい画像を、ulとliで横並びのリストにします。

<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>

JavaScriptの記述

プラグインを実行するコードです。これだけで無限ループが動きます。

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

オプションで動きをカスタマイズ

基本の設定はとてもシンプルです。ここからは、infiniteslide()にオプションを渡して、動きを調整する方法を解説します。まずは代表的な「スピード」と「方向」から見ていきましょう。

「スピード」の設定

デモサイトはこちらです。

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

HTMLは先ほどと同じため省略しています。数値が大きいほど速くなるので、サイトの雰囲気に合わせて調整しましょう。

「方向」の設定

デモサイトはこちらです。

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

HTMLは省略しています。初期値はleftで、画像は右から左へ流れます。

指定できるオプション一覧

スピードと方向のほかにも、次のオプションが用意されています。

そのほかのオプションは、GitHubの公式ページで確認できます。

まとめ

今回は、jQueryプラグイン「infiniteslidev2」の使い方を解説しました。必要なファイルはinfiniteslidev2.jsの1点だけで、infiniteslide()を呼び出すだけで画像を無限ループさせられます。スピードや方向などのオプションも試して、デザインに合った動きを見つけてください。

テンプレートを見る

Web・デザインの本棚を見る

< 前の記事

【Adobe XD】XDデータをFigmaに移行・変換する方法（SVG書き出し手順）

次の記事 >

【jQuery】サムネイル画像をクリックで切り替える実装方法