【jQuery】Vegas2で画面いっぱいに背景画像のスライドショーを表示

カッコいいアニメーション付きで、背景画像を画面いっぱいにスライド表示できるjQueryプラグイン「Vegas2」の実装方法についてです。

デモ作りました。

Vegas 2 | MISOBLOG

Vegas2の実装方法

プラグインの読み込み

こんな感じで、jQuery本体の後にVegasを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.js"></script>

vegas – cdnjs.com – The best FOSS CDN for web related libraries to speed up your websites!

オプション

デモで使用しているオプションはこんな感じです。

$(function(){
    $("body").vegas({
        overlay: 'https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/overlays/01.png',
        delay: 7000,
        timer: true,
        firstTransition: 'fade2',
        firstTransitionDuration: 2000,
        transition: 'fade2',
        transitionDuration: 2000,
        animation: 'kenburns',
        slides: [
            { src: "images/slide1.jpg" },
            { src: "images/slide2.jpg" },
            { src: "images/slide3.jpg" },
            { src: "images/slide4.jpg" }
        ]
    });
    $('a#previous').on('click', function(e) {
        $('body').vegas('options', 'transition', 'fade2').vegas('previous');
        e.preventDefault();
    });
    $('a#next').on('click', function(e) {
        $('body').vegas('options', 'transition', 'fade2').vegas('next');
        e.preventDefault();
    });
});

公式のSettingsページで、その他の詳しい使い方やデモが見れます。

Settings – Documentation – Vegas Background SlideShow

タイマーのカスタマイズ

下で伸びてるプログレスバーの位置を変えたり、色を変えたり。

.vegas-timer {
    top: 0 !important;
}
.vegas-timer-progress {
    background: #000 !important;
}

前後のナビゲーションを追加

デモでは、左右の矢印ボタンで前後の画像を切替えるようにしてます。

jQuery

$('a#previous').on('click', function(e) {
    $('body').vegas('options', 'transition', 'fade2').vegas('previous');
    e.preventDefault();
});
$('a#next').on('click', function(e) {
    $('body').vegas('options', 'transition', 'fade2').vegas('next');
    e.preventDefault();
});

HTML

<div class="navi">
    <a href="#" id="previous">前</a>
    <a href="#" id="next">次</a>
</div>

おわり

実際に動いているデモはコチラです。

Vegas 2 | MISOBLOG

ちょうどイツエの「ネモフィラ」を聴いていたので。