背景画像をスライドショーにする方法【jQueryプラグインVegas2】

みなさんこんにちは、ゆうやです！

この記事では、

「jQueryで背景画像をスライドショーにしたいんだけど、サクッとできる方法知りませんか？」

という方に向けてその方法を紹介します！

背景画像をスライドショーにする方法
まとめ

背景画像をスライドショーにする方法

スライドショー完成イメージ

テキストは上下中央揃えです

実際に動作しているデモページがあるのでご覧になってください〜

背景画像３枚をスライドショーさせています。

↓↓↓

デモページでスライドショーをみる

Vegas2をダウンロード

今回、背景画像をサクッとスライドショーにできるjQueryプラグインのVegas2を使用します！

Vegas2トップページ

まず下記URLにアクセスし右斜め下にある「DOWNLOAD VEGAS 2.4.4」をクリックしてVegas2のファイル一式をダウンロードしましょう。

https://vegas.jaysalvat.com/

ファイル一式の中で使用するのは、「vegas.min.css」と「vegas.min.js」です！

それぞれ読み込みましょう！

index.html

<link rel="stylesheet" href="./vendor/vegas/vegas.min.css"> // head内で 
<script type="text/javascript" src="./vendor/vegas/vegas.min.js"></script> // body閉じタグ直前で

※ファイルパスはご自身の環境に応じて設定して下さいまし。

背景画像スライドショーのHTML

HTMLはこんな感じで書きましょう！

↓↓↓

index.html

<div class="Vegas JS_VegasItem">
  <div class="Vegas-Inner">
    <div class="Vegas-Inner-Item">背景画像をスライドショーにする方法</div>
  </div>
</div>

背景画像をスライドショーにしたい要素に「JS_VegasItem」クラスをつけます！

背景画像スライドショーのCSS

・フルスクリーンで表示させたいので親要素に「width:100%」「height:100vh」を指定します！

・上下中央寄せにしたい子要素には「position:absolute」「top:50%」「left:50%」「transform:translate(-50%, -50%)」を指定します！

index.css

.Vegas {
  position: relative;
  width: 100%;
  height: 100vh;
}
.Vegas-Inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.Vegas-Inner-Item {
  color: #fff;
  font-size: 40px;
}

背景画像スライドショーのスクリプト

最後にjsファイルに記述していきましょう！

index.js

$(".JS_VegasItem").vegas({ // スライドショーにしたい要素指定
    slides: [
        { src: "./img/dummy2.jpg" }, // 背景画像1枚目
        { src: "./img/dummy3.jpg" }, // 背景画像2枚目
        { src: "./img/dummy4.jpg" }, // 背景画像3枚目
    ]
  });

背景画像の枚数を増やしたい場合は、{ src: “” }部分を表示したい数だけ追加してください(^o^)

また、用意されている「overlay」というオプションを使うと背景画像にオーバーレイをかけることができます！

ダウンロードしてきたファイル一式の「overlay」というフォルダ内にオーバーレイ用のドット画像が9つ用意されていますので試してみてもいいかもしれません(^o^)

オーバーレイを指定した場合のデモあるのでご覧になってください〜

デモページでオーバーレイverをみる

MEMO

ご自身で用意した画像ももちろんオーバーレイに指定できるのでいろいろ試してみて下さい。

参考記事

参考背景画像でスライドショーを実装するウェブラボ（株）スタッフブログ

まとめ

いかがでしたでしょうか。

かなり簡単に背景画像スライドショーを実装できますので、

「トップページのKVをスライドショーでかっこよくしたい！」という方にとってVegas2はとても便利なプラグインですね！

背景画像スライドショーのプラグインではもう１つ「BgSwitcher」がありますが両方使用した経験のある筆者的には今回紹介させていただいた「Vegas2」のほうが圧倒的に使い勝手がいいと思うのでご参考までに(^o^)

最後までご高覧いただきありがとうございました！