背景画像でスライドができるVegas.jsの使い方

背景画像をスライドできるJS見つけました〜

背景画像じゃなければbxslider信者ですが、背景画像を動かすJSはVegas.js！ということで使い方をご紹介します。

ダウンロード

Vegasのサイトの「DOWNLOAD」から一式をダウンロードします。

使用するのは「vegas.min.css」「vegas.min.js」だけでOK

head内に記述

head内に下記を記述します。画像のパスに気をつけてね。
わたしはフェードでふわっと切り替わる感じに設定したのでこのようになります。

<link rel="stylesheet" href="css/vegas.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/vegas.min.js"></script>
<script>
$(function(){  
  $('#mainvisual').vegas({
    slides: [
     { src: 'images/mainvisual01.jpg' },
     { src: 'images/mainvisual02.jpg' },
     { src: 'images/mainvisual03.jpg' }
    ],
     delay: 7000,
     timer: false,
     transitionDuration: 3000
  });
});
</script>

サンプル見てね

サンプルページ作りました。背景画像をふわっと切り替えています。

サンプルページ　ソースダウンロード（ZIP）

オプション

オプションも充実。
bxsliderの時みたいな熱量はないので省略します。
本家サイトで探してください。
どうしてもわからなかったら、コメントください！

参考にしたサイト

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