コンテンツを無限スクロールさせるjQueryプラグイン「infiniteSlide.js」が便利

コンテンツを無限スクロールさせるjQueryプラグイン「infiniteSlide.js」が便利






最近は「jQueryはもう使ってないよね」という話もちょこちょこ耳にするようになり、正直今更感があるわけですが…
コンテンツを無限スクロールさせるjQueryプラグイン「infiniteSlide.js」が久しぶりに使ってみても便利だったので、改めて自分の備忘録も兼ねて紹介したいと思います。

コンテンツを無限にスクロールできる「infiniteSlide.js」

とりあえず「infiniteSlide.js」を使った無限スクロールのサンプルを作ってみました。

「infiniteSlide」のデモページ

「infiniteSlide.js」を使えば、画像を並べてスクロールさせる表現がjQuery初心者でも簡単にでき、いくつか用意されているオプションで、スクロールスピードやスクロールもカスタマイズできます。

「infiniteSlide.js」ダウンロード

まずは下記ページから「infiniteSlide」をダウンロードします。

infiniteSlide – GitHub

次にjQuery本体と、ダウンロードした「infiniteSlide」をheadタグ内から読み込みます。

WordPressの場合は、基本的にjQuery本体の読み込みは必要ないのと、ダウンロードした「infiniteSlide.js」は function.php から読み込むことをオススメします。
WordPressでCSSやjQueryを読み込む時はfunction.phpが便利

WordPressでCSSやjQueryを読み込む時はfunction.phpが便利!

2017年11月23日

スクロールさせるコンテンツを記述する

jQuery本体と「infiniteSlide.js」を読み込んだら、HTMLにスクロールさせたい要素を記述していきます。

上記では ul,liタグで画像を配置していますが、divタグなども使用できるので、文字と画像をセットでスクロールさせるなんて事も可能です。

jQueryでスクロールさせる要素を指定

スクロールさせたい要素をHTML内に記述したら、最後にjQueryでスクロールさせたい要素を指定します。外部ファイルやHTML内、WordPressの場合はfooter.php内など、任意のファイルに記述します。

基本的な記述

WordPressの場合は、$ を jQuery に変えて以下のように記述します。

上記の記述では $(window).load(function(){ }); を追加し、画像を全て読み込んからjQueryを実行しています。そうする事で画像が読み込まれないというエラーを回避しています。あくまで任意ですが追加で記述しておくことをオススメします。



オプション

上記は基本的な部分だけなので、オプションを追加して動きに変化をつけていきます。

オプション名
height高さを指定します
speedスクロールの速さ 単位はpx/秒
directionスライドの向 left / right / up / down
pauseonhoverマウスオーバーでストップするかを指定 true / false
clone子要素のコピー数を指定

オプションの「clone」が意外に便利で、配置する画像やコンテンツが少ないと無限ループが途切れることがあるのですが、cloneオプションの数値を増やすことで画像の途切れを回避することができます。

「infiniteSlide」のデモページ

まとめ

私は「infiniteSlide」しか使ったことがないので他のプラグインとの比較できませんが、なんだかんだで使い続けていますね。

導入も設定もシンプルですし、動きも軽いのでjQuery初心者さんにもオススメできます。
サイト内で画像やコンテンツを無限スクロールさせたいという方は、是非一度お試しあれ。

コンテンツを無限スクロールさせるjQueryプラグイン「infiniteSlide.js」が便利」でした。

WordPressでCSSやjQueryを読み込む時はfunction.phpが便利

WordPressでCSSやjQueryを読み込む時はfunction.phpが便利!

2017年11月23日
初心者でもコピペで実装!スクロールしたら要素をフワッと下から表示させる方法【jQuery】

初心者でもコピペで実装!スクロールしたら要素をフワッと下から表示させる方法【jQuery】

2018年8月10日






コンテンツを無限スクロールさせるjQueryプラグイン「infiniteSlide.js」が便利