フルスクリーンスライダー実装方法（slider-pro-master）

フルスクリーンスライダーを簡単に実装しよう！

ここのサイトからインストールできます
サイトなんていいから早くコードをくれと言う方は↓からダウンロードしてね。
ソースダウンロード

※前提として、jquery-1.11.0.min.jsは入れておきましょう。
まあ入ってなくても、ソースダウンロードすればその中に入ってるからそれを使おう！

使用するファイル

slider-pro.min.css
jquery.sliderPro.min.js

この２ファイルだけ。
使用するディレクトリにファイルを移動しましょう！

表示させたいHTMLはこんな感じ！コピペでOK

<div id="slider-pro" class="slider-pro">
    <div class="sp-slides">
        <div class="sp-slide"><img class="sp-image" alt="" src=""></div>
        <div class="sp-slide"><img class="sp-image" alt="" src=""></div>
        <div class="sp-slide"><img class="sp-image" alt="" src=""></div>
    </div>
</div>

srcに画像のパスを追加して、altに説明を入れよう！

slider-pro-masterをキックしよう！

動かすには

sliderPro-start.js

ファイルを作成し、

$(function(){
    $( '#slider-pro' ).sliderPro({
        width: '100%',
        height: 500,
        responsive: true,
        imageScaleMode: 'cover',
            // 'cover'、'contain'、'exact'、'none'
        slideDistance:0,
        arrows: true,
        autoHeight:false,
        buttons: false,
        fadeFullScreen:true,
        waitForLayers: true,
        autoplay: true
    });
});

を書き込もう！

オプションはたくさんあるので参考にして自分なりにカスタマイズしてみてね！
SliderPro Options

画面で確認して、動いてたら完了！

終わり