横幅いっぱいに表示出来るJqueryスライダー

Plugin: jquery.fullwidthslider.1.0

提供元: TARO_UNITさん

1.ダウンロード

以下のURLからダウンロード

http://www.torounit.com/blog/2011/12/05/1048/

2.インストール

headタグ内にダウンロードしてきたファイルを読み込む

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery.fullwidthslider.1.0.js"></script>

※パスやファイル名は適宜変えてください。

3.実装方法

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>

JavaScript

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

4.オプション

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