Web初心者がjQuery 「infiniteslide.js」を使って無限スクロールコンテンツを実装する方法(サンプル付き)

ギャラリーの写真を並べてスライドさせるだけでもコンテンツになります。カフェなどのサイトで店舗外見、メニューなどきれいな写真を撮って見せるだけでもきれいです。

今回は、web初心者向けにwebサイト上で配布しているスクリプトを使って無限スクロールコンテンツを表示させるjQueryを実装します。

Web初心者がjQuery 「infiniteslide.js」を使って無限スクロールコンテンツを実装する方法(サンプル付き)

URLhttp://wood-roots.com/

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

ファイルをダウンロード STEP2

ダウンロード

サンプルとソースをダウンロード」がありますのでクリックしてください。

「サンプルとソースをダウンロード」をクリックするとファイル一式をダウンロードできます。

データを解凍します STEP3

「サンプルとソースをダウンロード」をサイトからダウンロードして、zipファイルを解凍します。

解凍すると
データを解凍します
データが入っています。

HTMLに実際に動く記述を書きます STEP4

「height: 200」 は、スクロールする画像の高さです。
「direction: ‘left’」は、スクロールの方向です。右からスクロールさせたいなら「left」のところを「right」と書いてください。

HTMLを設置します STEP5

ダウンロードしたHTMLとは少し変えています。

CSSを記述します STEP6

見た目を整えるために最低限のCSSだけです。

無限スクロールのjQueryファイルを付けます STEP7

jQuery

赤枠で囲った
「infiniteslide.js」
をSTEP1でjQueryのコードの下に追加します。

※cssとjsファイルはご自身の環境に合わせてください

まとめ

[サンプル] 無限スクロールコンテンツ

使用参考例http://ortaggio.jp/

よくわからなかった人もいるかもしれませんが、無限スクロールはメインイメージを表示させたりするときに使われますのでぜひ試してみてください。

Web初心者がjQuery 「infiniteslide.js」を使って無限スクロールコンテンツを実装する方法(サンプル付き)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*