おすすめグッズや役立つ情報ブログ

Sedori Plan

jQuery

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/

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

スポンサーリンク
  • この記事を書いた人
  • 最新記事

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-jQuery

Copyright© Sedori Plan , 2018 All Rights Reserved.