画像やテキストといったコンテンツをスライドではなく無限スクロールで表示したい時は、jQueryプラグインの「infiniteslide.js」が便利です。
ここでは、「infiniteslide」をダウンロードするところから、実際にサイトに適用するまでの一連の流れを紹介していきます。
目次
「infiniteslide」について
「infiniteslide」は、コンテンツを自動で無限スクロールさせるjQueryプラグインです。
このプラグインは、woodrootsさんが作られた無限にスクロールに特化した非常にシンプルなプラグインですが、定義の際に引数として各種設定値を引き渡すことにより、秒数やスクロール方向も自在にカスタマイズができるという非常に汎用性が高いjQueryプラグインです。
スクロールさせるコンテンツは画像でもテキストでもブロックでも何でも良く、とにかくクラス名やID名がついていれば無限スクロールの対象とすることができます。非常に便利ですね。
「infiniteslide」のバージョン情報ですが、2013年に初期バージョンである「infiniteslide.js」が公開されてきましたが、今年2017年、新たな機能が追加された「infiniteslide.js v2」が公開されました。
従来のプラグインのシンプルな使い勝手を引き継ぎつつ、縦方向へのスクロールに対応したり（今までのものは横方向のみ対応でした）、要素の間にマージンを入れられるようになったり、より滑らかに美しくスクロールが実現できるような改善がされています。
「infiniteSlide.js v2」が実際にどのように動くのかを確認したい場合は、以下のデモページで動きを見ることができます。
デモページjQueryプラグイン「infiniteSlide.js v2」のデモページ
「infiniteSlide」の導入手順
【STEP1】プラグインをダウンロードする
まずは、公式サイトからプラグインをダウンロードしましょう。
外部ページ「infiniteSlide.js v2」公式ダウンロードサイト
【STEP2】jQueryとプラグインファイルをサーバーにアップロードする
ダウンロードしたzipファイルを解凍します。
解凍したフォルダの中から、「infiniteslidev2.js」を選択して、サーバー上にFTP転送でアップロードします。
「FTP転送って何？」という方は以下の記事を参考にしてみてください。
【STEP3】jQueryとプラグインの読み込み
ループスライドを実装したいサイト上で、jQueryの本体プログラムと、先ほどサーバーにアップロードした「infiniteslidev2.js」を読み込む必要があります。
jQueryの本体プログラムは、既にサイトに導入されている場合はバージョン情報に気をつけてください。
現状、「infiniteslidev2.js」プラグインはjQuery1.x系と2.x系のみで動作が保証されています。
最新の3.x系をお使いの方は、動作が保証されていませんので、1.x系または2.x系に切り替えられることをお勧めします。
各種ファイルを読み込むために、以下のようなプログラムの記述を行います。
プラグイン読み込みと指定エリアをループスライドさせる記述
【STEP4】スクロール対象をHTML、CSSで用意する
自分のサイト上でスクロールを行いたい領域に、画像やテキストといったコンテンツを配置します。
実際にスクロールさせるエリアの記述
スライドのデザインを調整する記述
【STEP5】「infiniteSlide.js v2」の設定を行う
先ほど用意したHTMLのコンテンツをスクロールさせるために、「infiniteSlide.js v2」の設定を行なっていきます。
以下に設定方法のサンプルを紹介しますので、それぞれ任意の速さ、方向、効果をカスタマイズしてお使いください。
50ミリ秒で左に流れるスクロール（オンマウスで動きストップ）を行う設定
なお、設定の際のオプションですが、以下のようなオプションが用意されています。
任意の内容にカスタマイズして設定を行いましょう。
| オプション | 説明 | 設定値 |
|---|---|---|
| speed | スクロールの速さ | 数字で指定。（●px/秒） |
| direction | スクロールの方向 | 「left」「right」「up」「down」 |
| pauseonhover | マウスオーバーでスクロールを一時停止するかどうか | 「true」「false」 |
| responsive | ブラウザサイズいっぱいに表示するかどうか | 「true」「false」 |
| clone | コンテンツが少なすぎると不具合につながるため、クローンを生成する場合の個数 | 数字で指定。（3枚の画像に対してclone=2の場合、6枚で表示されます） |
【STEP6】動作確認
以上で、設定は完了です。
実際にページを開いて、設定した内容のとおりにスクロールされていることを確認しましょう。
なお、スクロールが行われない場合、原因としてjavascriptとjQueryのプログラムが競合しているケースがあります。
その場合、「TypeError: $ is not a function.」エラーが表示されますので、以下のページを参考に競合を解消してください。
