要素を指定してスライドショーを表示できる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枚目の画像の指定
]
});
簡単に設置でき、且つカッコイイスライドショーができるので、使用してみてください。