横幅いっぱいのコンテンツスライダーつくりました。

jQueryで横幅いっぱいのコンテンツスライダー、jQuery Full-width Sliderというプラグインをつくりました。
トップページのメインビジュアルとかで使えると思います。というか昔の案件で使ったものをブラッシュアップしたものです。画像以外も使えます。

jquery.fullwidthslider.1.0

デモ:http://demo.torounit.com/fullwidthslider/
2012-02-09:デモのCSSを修正。IE対応。

デモの写真はFree.Stockerのを使わせて頂いています。良い写真いっぱいありますよねここ。

使い方

js
[js]
$(function(){
$(".slide").fullWidthSlider({
width:640,
height:480
});
})
[/js]

html
[html]
<div class="slide">
<ul class="stage">
<li><img src="slideImage/demo1.jpg" alt="" width="640" height="480" /></li>
<li><img src="slideImage/demo2.jpg" alt="" width="640" height="480" /></li>
<li><img src="slideImage/demo3.jpg" alt="" width="640" height="480" /></li>
</ul>
</div>
[/html]

こんな感じです。

.stageの下にa.leftNav,a.rightNavという要素を生成します。(オプションで消せます。)
それがそれぞれ左右のナビゲーションになってます。適当に半透明の画像などを背景に指定してあげたりすれば良いと思います。

CSSの書き方はデモを参照下さい。

オプション値

オプション 説明 デフォルト
width スライドの横幅 960
height スライドの高さ 400
time 切り替わるスピード(ミリ秒) 5000
slideStage スライドのステージ
(スライド群を格納する要素)
“.stage”
slideMember スライドする要素 “li”
nav スライドのナビゲーションを使うかどうか true
slideNavi ナビゲーションのクラス “.slideNavi”
mouseoverStop マウスオーバーで止める true

一応テストはしてないこともないですが・・・って程度なので、何かバグとか発見しましたらToro_Unitまでリプライ下さい。