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

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

“横幅いっぱいのコンテンツスライダーつくりました。” への4件のフィードバック

  1. kedのアバター
    ked

    はじめまして。使わせていただきたいのですが、fullwidthではなく幅を指定したい場合はどうしたらいいですか?

  2. ichiのアバター
    ichi

    すいませんこちらのプラグイン使用させていただいてます。ありがとうございます。動きにeasingを足したいので方法を教えていただけないでしょうか?
    よろしくお願いいたします。

  3. 405のアバター
    405

    はじめまして。こちら使わせていただきました。jquery.fullwidthslider.1.0
    右から左への動きをもう少しゆっくりさせたいのですが、どうしたらいいでしょうか?
    オプションで制御可能でしょうか?

    1. Toro_Unitのアバター

        スピード自体はtimeの値で変更できます。右から左と左から右で数字を変えたいとかいうことならば、プラグインのカスタマイズが必要ですね。