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

しむ

普段はWEBエンジニアとして会社員+フリーで活動しています。 メイン言語はPHPでフロントよりバックエンドの方が得意です。 このブログでは自分が実装した内容を纏めて色々紹介していけたらと思います。

One Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です