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

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

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

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

コメントを残す

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.