フルスクリーンスライドショープラグイン Jliderの使い方

フルスクリーンのスライドショーのプラグインはたくさんありますが、この「jlider」は、ウィンドウいっぱいと画面いっぱいに表示してくれます。

1.デモ

[デモ]
・画像左上のボタンでオートプレイ開始・停止ができます。
・画像右上のボタンでフルスクリーンになります。
・Safariだとナビゲーションのボタンが表示されないです。

2.ダウンロード

公式ページに行って、ダウンロードしてください。
ダウンロード完了し解凍すると「jlider-master」フォルダーが取得できます。

3.必要なファイル

jlider-masterフォルダー内のjliderフォルダーの中身を全て自分のフォルダーにコピーします。 jlider.cssとjlider.jsが共にsvgファイルを読み込んでいるためです。

4.CSSの編集

画像の下にテキストも表示できるので、色を設定した方が良いです。

.jlider {
	color:	#fff;
	width:	100%;
}

5.HTMLの編集

headタグ内で、jilider.css、jlider.min.js、jquery.jsを読み込み、次にプラグイン本体のjliderSlideを実行します。

<link href="./jlider/jlider.css" rel="stylesheet" media="all" type="text/css" />
<script src="./js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="./jlider/jlider.min.js" type="text/javascript"></script>

<script>
	$(document).ready(function() {
		$("#jl1").jliderSlide({
			slideEffect	: "random",
			autoPlay	: true,
			width		: "800px",
			height		: "300px",
			visiProgress	: true,
			hideControl	: "hover",
		});
	});
</script>
</head>

bodyタグ内で、画像を追加していきます。

	<div id="container">
		<ul class="jlider" id="jl1">
			<li><img src="./images/s001.jpg" alt="s001.jpg" /></li>
			<li><img src="./images/s002.jpg" alt="s002.jpg" /></li>
			<li><img src="./images/s003.jpg" alt="s003.jpg" /></li>
		</ul>
	</div>

「#jl1」は、CSSに書かなくてもOKです。

6.オプションの説明