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

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

jquery.fullwidthslider.1.0

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

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

使い方

js

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

  • 405

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

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

  • ichi

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

  • ked

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

  • Pingback: 横幅いっぱいに表示出来るJqueryスライダー – Paradigm()

  • Pingback: ただいまレイアウト改造中です。 | ぽちろぐ()

  • Toru Murakami

    お借りいたします!