画面いっぱいに背景画像をスライドさせる「Vegas2」

2019.4.26 JavaScript, jQuery

jQuery「Vegas2」を使って背景画像でスライダーを作ってみました。

全画面スライドを表示しつつ、パララックスもする…という案件があったので、背景スライダーを探していたのです。
なので、デモはパララックスも入ったものになっています。

デモ

デモサイトはこちら

ダウンロード

ひとまず「Vegas2の公式サイト」から一式をダウンロードします。

色々入ってますが、必要なファイルは「vegas.min.js」「vegas.min.css」「overlaysフォルダ」です。

設定

上記のファイルを設置したいフォルダに入れていきます。

html設定

まずはjsとcssをhead内に読み込みます。もちろんjqueryも必要です。

<link rel="stylesheet" type="text/css" href="js/vegas/vegas.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script script type="text/javascript" src="js/vegas/vegas.min.js"></script>

css設定

スライダーが入る枠組みを100％指定しておきます。これで全画面になります。
※デモはパララックスしてるのでbodyにつけてます。

body {
    width: 100vw;
    height: 100vh;
}

body {

width: 100vw;

height: 100vh;

}

js設定

最後に、画像を読み込むjsを設定します。今回bodyに読み込んでいるので、bodyが入っているところには任意のIDを入れるとよいです。

<script>
$(function() {
    $('body').vegas({
        slides: [
            { src: 'img/p1.jpg' },
            { src: 'img/p2.jpg' },
            { src: 'img/p3.jpg' },
            { src: 'img/p4.jpg' }
        ],		
    });
});
	</script>

$(function() {

$('body').vegas({

slides: [

{ src: 'img/p1.jpg' },

{ src: 'img/p2.jpg' },

{ src: 'img/p3.jpg' },

{ src: 'img/p4.jpg' }

});

</script>

オプション

むちゃくちゃ沢山オプションがあります！公式のセッティングページを参考に追加すると、とてもオシャンなスライダーができます。

<script>
$(function() {
    $('body').vegas({
        slides: [
            { src: 'img/p1.jpg' },
            { src: 'img/p2.jpg' },
            { src: 'img/p3.jpg' },
            { src: 'img/p4.jpg' }
        ],
	overlay: 'js/vegas/overlays/02.png', //オーバーレイのパターン画像
    });
});
	</script>