[JS]HTMLコンテンツにも対応、カルーセルで表示するスライダーのスクリプト -jShowOff

複数の画像やHTMLコンテンツをカルーセルで表示するスライダーを実装するjQueryのプラグインを紹介します。

jShowOff: a jQuery Content Rotator
デモ

[ad#ad-2]

設置できるコンテンツは画像だけでなく、下記のようなHTMLコンテンツにも対応しています。

HTMLコンテンツの表示

スクリプトは他にもスライド時のエフェクト、コントロールバーの有無、サムネイル表示など、オプションも揃っています。

スライド時のエフェクト・カスタムラベルのデモ

[ad#ad-2]

エフェクト・コントロール無しのデモ

サムネイルのデモ

jShowOffの実装

HTML

一つ以上の子要素と、それらを内包する親要素をスライダーとして使用します。
下記は、テキストや画像を配置したdiv要素を子要素として、それらを内包するdiv要素を配置しています。

<div id="features">
	<div><p>This is a slide!</p></div>
	<div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div>
</div>

JavaScript

「jquery.js」と「jquery.jshowoff.min.js」を外部ファイルとし、下記のスクリプトを記述します。
セレクタ（#features）は、自分の環境にあわせて変更してください。

$(document).ready(function(){ $('#features').jshowoff(); });

スクリプトのオプションでは、自動送りの有無、コントロールの有無、スライド時のエフェクト、スピードなどが設定できます。