1

横幅いっぱいに表示出来る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