最近は「jQueryはもう使ってないよね」という話もちょこちょこ耳にするようになり、正直今更感があるわけですが…
コンテンツを無限スクロールさせるjQueryプラグイン「infiniteSlide.js」が久しぶりに使ってみても便利だったので、改めて自分の備忘録も兼ねて紹介したいと思います。
目次
コンテンツを無限にスクロールできる「infiniteSlide.js」
とりあえず「infiniteSlide.js」を使った無限スクロールのサンプルを作ってみました。
「infiniteSlide.js」を使えば、画像を並べてスクロールさせる表現がjQuery初心者でも簡単にでき、いくつか用意されているオプションで、スクロールスピードやスクロールもカスタマイズできます。
「infiniteSlide.js」ダウンロード
まずは下記ページから「infiniteSlide」をダウンロードします。
次にjQuery本体と、ダウンロードした「infiniteSlide」をheadタグ内から読み込みます。
1 2 3 | <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="infiniteslide.js"></script> <script src="jquery.pause.min.js"></script> |
スクロールさせるコンテンツを記述する
jQuery本体と「infiniteSlide.js」を読み込んだら、HTMLにスクロールさせたい要素を記述していきます。
1 2 3 4 5 6 7 8 | <div class="infiniteslide"> <ul> <li><img src="画像 1" alt="" /></li> <li><img src="画像 2" alt="" /></li> <li><img src="画像 3" alt="" /></li> <li><img src="画像 4" alt="" /></li> </ul> </div> |
上記では ul,liタグで画像を配置していますが、divタグなども使用できるので、文字と画像をセットでスクロールさせるなんて事も可能です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="infiniteslide"> <div class="scroll-item"> <p>テキスト 1</p> <img src="画像 1" alt="" /> </div> <div class="scroll-item"> <p>テキスト 2</p> <img src="画像 2" alt="" /> </div> <div class="scroll-item"> <p>テキスト 3</p> <img src="画像 3" alt="" /> </div> <div class="scroll-item"> <p>テキスト 4</p> <img src="画像 4" alt="" /> </div> </div> |
jQueryでスクロールさせる要素を指定
スクロールさせたい要素をHTML内に記述したら、最後にjQueryでスクロールさせたい要素を指定します。外部ファイルやHTML内、WordPressの場合はfooter.php内など、任意のファイルに記述します。
基本的な記述
1 2 3 4 5 6 7 8 9 10 | <script> /* イメージスクロール */ $(function(){ $(window).load(function(){ $('.infiniteslide').infiniteslide({ //オプションを記述 }); }); }); </script> |
WordPressの場合は、$ を jQuery に変えて以下のように記述します。
1 2 3 4 5 6 7 8 9 10 | <script> /* イメージスクロール */ jQuery(function($){ $(window).load(function(){ $('#Infiniteslide').infiniteslide({ //オプションを記述 }); }); }); </script> |
上記の記述では $(window).load(function(){ }); を追加し、画像を全て読み込んからjQueryを実行しています。そうする事で画像が読み込まれないというエラーを回避しています。あくまで任意ですが追加で記述しておくことをオススメします。
オプション
上記は基本的な部分だけなので、オプションを追加して動きに変化をつけていきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script> /* イメージスクロール */ jQuery(function($){ $(window).load(function(){ $('.infiniteslide').infiniteslide({ 'height': 400, // 高さを指定 'speed': 30, // スピードを指定 'direction' : 'left', // スライドする向きを指定 'pauseonhover': true, // マウスオーバーでストップするかを指定 'clone' : 2 // 子要素のコピー数を指定 }); }); }); </script> |
オプション名 | 値 |
---|---|
height | 高さを指定します |
speed | スクロールの速さ 単位はpx/秒 |
direction | スライドの向 left / right / up / down |
pauseonhover | マウスオーバーでストップするかを指定 true / false |
clone | 子要素のコピー数を指定 |
オプションの「clone」が意外に便利で、配置する画像やコンテンツが少ないと無限ループが途切れることがあるのですが、cloneオプションの数値を増やすことで画像の途切れを回避することができます。
まとめ
私は「infiniteSlide」しか使ったことがないので他のプラグインとの比較できませんが、なんだかんだで使い続けていますね。
導入も設定もシンプルですし、動きも軽いのでjQuery初心者さんにもオススメできます。
サイト内で画像やコンテンツを無限スクロールさせたいという方は、是非一度お試しあれ。
「コンテンツを無限スクロールさせるjQueryプラグイン「infiniteSlide.js」が便利」でした。