スライドショーjqueryプラグインjSliderの使い方

このスライドショーのjqueryプラグインは、軽量コンパクトなレスポンシブ＆スワイプ対応のイメージスライダーです。設定でカルーセルのような表示もできますし、背景画像のスライドショーとしても使用できる事がいいです。

1.デモ

デモを作成しましたのでよろしかったら、ここをクリックしてください。

2.ダウンロード

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

3.必要なファイル

assets/jsフォルダーの「jquery.jSlider.min.js」とassets/cssフォルダーの「jSlider.css」をそれぞれ自分のフォルダーにコピーします。

4.CSSの編集

CSSは特に必要ありませんが、デモでは以下のようにしました。#slider1は画像の周りに枠を付けたパターンで、#slider2は２つの画像を表示するパターンです。

#slider1 {
	max-width:	770px;
	margin:		20px auto;
	border:		7px solid #fff;
	box-shadow:	2px 2px 10px #000;
	border-radius:	5px;
}
#slider2 {
	width:		512px;
	height:		99px;
	margin:		20px auto;
}

5.HTMLの編集

headタグ内で作成したcssファイルとjqueryファイルを読み込みます。このプラグインは初期化の記述をしなくても良いみたいです。

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

bodyタグ内で画像を追加していきます。divタグにプラグインのオプションを記述していきます。「id="slider1"」は自分で作成したCSS用で、「class="jSlider"」はプラグイン用です。

	<div id="slider1" class="jSlider"
		data-navigation="hover"
		data-indicator="hover"
		data-speed="500"
		data-delay="3000"
		data-transition="slide"
		data-loop="true"
		data-group="1"
	>
		<div><img src="./images/s001.jpg"/></div>
		<div><img src="./images/s002.jpg"/></div>
		<div><img src="./images/s003.jpg"/></div>
		<div><img src="./images/s004.jpg"/></div>
	</div>

6.オプションの説明