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

- リンク: https://torounit.com/blog/%e6%a8%aa%e5%b9%85%e3%81%84%e3%81%a3%e3%81%b1%e3%81%84%e3%81%ae%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be%e3%81%97/
- 公開日: 2011-12-05T10:15:49+09:00
- 作成者: Toro\_Unit

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

[jquery.fullwidthslider.1.0](https://torounit.com/wp-content/uploads/2011/12/jquery.fullwidthslider.1.0.zip)

デモ:[http://demo.torounit.com/fullwidthslider/](http://demo.torounit.com/fullwidthslider/)

2012-02-09:デモのCSSを修正。IE対応。

デモの写真は[Free.Stocker](http://free.stocker.jp/)のを使わせて頂いています。良い
写真いっぱいありますよねここ。

# 使い方

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の書き方は[デモ](http://demo.torounit.com/fullwidthslider/)を参照下さい。

# オプション値

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

一応テストはしてないこともないですが・・・って程度なので、何かバグとか発見しましたら
[Toro_Unit](http://twitter.com/Toro_Unit)までリプライ下さい。

## コメント

### 投稿者: ked

- リンク: https://torounit.com/blog/%e6%a8%aa%e5%b9%85%e3%81%84%e3%81%a3%e3%81%b1%e3%81%84%e3%81%ae%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be%e3%81%97/#comment-950
- 公開日: 2012-12-04T17:49:00+09:00

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

### 投稿者: ichi

- リンク: https://torounit.com/blog/%e6%a8%aa%e5%b9%85%e3%81%84%e3%81%a3%e3%81%b1%e3%81%84%e3%81%ae%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be%e3%81%97/#comment-922
- 公開日: 2012-08-15T21:33:00+09:00

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

### 投稿者: 405

- リンク: https://torounit.com/blog/%e6%a8%aa%e5%b9%85%e3%81%84%e3%81%a3%e3%81%b1%e3%81%84%e3%81%ae%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be%e3%81%97/#comment-911
- 公開日: 2012-06-07T17:10:00+09:00

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

### 投稿者: Toro\_Unit

- リンク: https://torounit.com/blog/%e6%a8%aa%e5%b9%85%e3%81%84%e3%81%a3%e3%81%b1%e3%81%84%e3%81%ae%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be%e3%81%97/#comment-912
- 公開日: 2012-06-07T22:35:00+09:00

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