Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

jQuery

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

投稿日:

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

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

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

URLhttp://wood-roots.com/

jQueryを動かすために STEP1

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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

ダウンロード

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

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

データを解凍します STEP3

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

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

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

<script type="text/javascript">
	
	$(function(){
		$('.infiniteslide').infiniteslide({
			height: 200,
			direction: 'left',			
		});
	});

</script>

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

HTMLを設置します STEP5

<div class="infiniteslide">
	<ul>
        <li><img src="http://lorempixel.com/400/200/abstract" /></li>
        <li><img src="http://lorempixel.com/400/200/animals" /></li>
        <li><img src="http://lorempixel.com/400/200/nature" /></li>
        <li><img src="http://lorempixel.com/400/200/people" /></li>
        <li><img src="http://lorempixel.com/400/200/abstract" /></li>
        <li><img src="http://lorempixel.com/400/200/animals" /></li>
        <li><img src="http://lorempixel.com/400/200/nature" /></li>
        <li><img src="http://lorempixel.com/400/200/people" /></li>

	</ul>
</div>

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

CSSを記述します STEP6

	ul,li {
		list-style: none;
		margin: 0;
		padding: 0;
	}

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

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

jQuery

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

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/020/infiniteslide.js"></script>

まとめ

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

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

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

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

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-jQuery

Copyright© Sedori Plan , 2019 All Rights Reserved.