memocarilog

以前は、Slides, A Slideshow という名前だった多機能スライドショープラグインですが、いつの間にか SlidesJS という名前に変わり、機能もシンプルに、かつマルチデバイス対応できるものに変わっていました。

オプションや使い方などもマルっと変わっていたため、古いバージョンの内容を削除し現在の仕様内容へ書き換えました。

SlidesJS プラグインの特徴

モバイルページにも使いやすいよう画像のレスポンシブ表示が可能で、スワイプでの画像切り替えもできます。
オプションでページャー・ページナビゲーション・自動再生の開始と停止ができ、エフェクトはスライドにもフェードにも変更できます。欲しい機能が揃っている上、設置も簡単です。

ダウンロード

プラグインのダウンロードは以下のページより。
SlidesJS, a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3

デモページ

サンプルは以下の Examples のリンク先で確認できます。
SlidesJS Examples

使い方

HTML

div などのブロック要素に任意の id 又は class を付け、その中に img 要素を入れます。

<div id="slides">
	<img src="images/1jpg" alt="1jpg">
	<img src="images/2jpg" alt="2jpg">
	<img src="images/3jpg" alt="3jpg">
	<img src="images/4jpg" alt="4jpg">
	<img src="images/5jpg" alt="5jpg">
</div>

jQuery

jQuery 本体とダウンロードした SlidesJS プラグインをヘッダー又は、フッターで読み込みます。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>

続けて以下のように、スライドショーにしたい要素に対し SlidesJS を呼び出し、画像の最大値の横と縦のサイズを指定します。ここで指定した縦横の比率で画像を縮小してくれます。

<script>
$(function(){
	$("#slides").slidesjs({
		width: 800,
		height: 600
    });
});
</script>

これだけで橫スライドのスライドショーができました。後はナビゲーションなどをCSSで装飾すれば完成です。

オプション

width & height （横幅 / 高さ）

画像の横幅と高さを指定します。

書き方

$("#slides").slidesjs({
	width: 800,
	height: 600
});

start （開始位置）

スライドを開始する画像を指定することができます。startと最初に表示する画像の順番を数字で指定します。

書き方

$("#slides").slidesjs({
	start: 3
});

navigation （ナビゲーション）

次へ・前へのナビゲーションを表示する（ true ）か否（ false ）かを設定できます。デフォルトでは表示されるようになっています。
true に設定した場合、合わせてナビゲーションで画像を切り替えた時のエフェクトを指定することができます。（”slide” 又は “fade”）

書き方

以下のように指定すると、ナビゲーションで画像を送った場合フェードのエフェクトになります。

$("#slides").slidesjs({
	navigation: {
	active: true,
	effect: "fade"
}
});

pagination （ページャー）

画像に下に置かれるページャーを表示するか（ true ）否か（ false ）を設定できます。デフォルトでは表示されるようになっています。
true に設定した場合、合わせてページャーで画像を切り替えた時のエフェクトを指定することができます。（”slide” 又は “fade”）

書き方

以下のように指定すると、ナビゲーションで画像を送った場合フェードのエフェクトになります。

$("#slides").slidesjs({
	pagination: {
	active: true,
	effect: "fade"
}
});

play （再生）

スライドショーを再生 / 停止するボタンを表示するか（ true ）否か（ false ）を指定することができます。デフォルトでは表示されないようになっています。
active を true に設定した場合以下のオプションをさらに指定できます。

effect 再生時の画像エフェクト（”slide” 又は “fade”）

interval 画像切替の間隔（ミリ秒）

auto 自動再生するか否か（ true 又は false）

swap 再生 / 停止ボタンを片方ずつ交互に表示する（ true ）か常に両方表示する （ false ）

pauseOnHover 画像にマウスオーバーでスライドショーを停止する（ true ）か否か（ false ）を指定する

restartDelay 停止から再スタートした場合の遅延秒数（ミリ秒）

書き方

以下のように設定すると、再生 / 停止ボタンを表示し、スライドのエフェクト・3秒間隔の画像切り替え・画像をマウスオーバーで停止するスライドショーになります。

$("#slides").slidesjs({
	play: {
		active: true,
		effect: "slide",
		interval: 3000,
		auto: false,
		swap: true,
		pauseOnHover: true,
		restartDelay: 2500
	}
});

effect （エフェクト設定）

画像が切り替わる時のアニメーションが実行されるスピード（ミリ秒）を指定することができます。slide でスライド、fade でフェードの設定ができ、fade エフェクトは、クロスフェードにするかどうかも指定できます。

書き方

$("#slides").slidesjs({
	effect: {
		slide: {
			speed: 200
		},
		fade: {
			speed: 300,
			crossfade: true
		}
	}
});

callback （コールバック）

loaded でスライド開始前、start でスライドが開始する時、complete でスライドが終わった時のタイミングでコールバックを指定することができます。