画面いっぱいに背景画像をスライドするエフェクトも豊富なjQueryプラグイン「VEGAS2」

要素を指定してスライドショーを表示できるjQueryプラグイン「VEGAS2」。
要素の指定次第では背景いっぱいにダイナミックなスライドショーができ、豊富なエフェクトを設定できるもの魅力のプラグインです。

デモ

デモはこちらから

各エフェクトはこちらから

必要なファイルのダウンロード

公式サイト(右下DOWNLODVEGAS2.X.X部分) 、もしくはGitHub からダウンロードします。

ヘッダーにjQeuryとcssを指定

<link rel="stylesheet" type="text/css" href="css/vegas.min.css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<script type="text/javascript" src="js/vegas.min.js"></script>

 

※ファイルの指定は各々のパスに応じて指定してください。

HTMLに要素を記述

<body>

  <divid="#vegas-slide"></div>

</body>

JQueryを記述

切り替えエフェクト、オプション、画像を指定します。
各オプションはこちらから 

 

$('#vegas-slide').vegas({

    transition: 'fade2', //エフェクトの種類を指定

    transitionDuration: 1000, //スライドの遷移アニメーションの時間

    delay: 6000, //スライド切り替え時の遅延時間

   timer: false, //timerの表示・非表示

    loop: true, //スライドをループするかループするかしないか

    slides: [

        { src: 'images/slide01.jpg' }, //1枚目の画像の指定

        { src: 'images/slide02.jpg' }, //2枚目の画像の指定

        { src: 'images/slide03.jpg' }, //3枚目の画像の指定

        { src: 'images/slide04.jpg' }, //4枚目の画像の指定

        ]

});

 

簡単に設置でき、且つカッコイイスライドショーができるので、使用してみてください。