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

Written by

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までリプライ下さい。

Comments