背景画像スライダー「Vegas2」の使い方：jQuery
シェア
ツイート
背景画像をスライドさせるjQueryプラグイン「Vegas2」の使い方メモ。
vegas.jsのダウンロード
まずは公式サイトかGitHubからダウンロードします。
ダウンロードしたzipファイルの中から、
vegas.min.cssとvegas.min.jsの2つを使用しますので
該当ディレクトリにコピーします。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"> </script> <link rel="stylesheet" href="css/vegas.min.css"> <script type="text/javascript" src="js/vegas.min.js"></script>
を追加します。
Vegas2の使い方
あとは
<div id="slide"> 内容 </div>
のような背景スライダーを使用したいidもしくはclassのボックスに対して
<script>
$(function() {
$('#slide').vegas({
slides: [
{ src: 'img/slide1.jpg' },
{ src: 'img/slide2.jpg' },
{ src: 'img/slide3.jpg' },
{ src: 'img/slide4.jpg' }
],
delay: 5000,
transitionDuration: 2000,
transition: 'fade',
});
});
</script>
のようにすればOK
細かい設定の各オプションは、
http://vegas.jaysalvat.com/documentation/settings/
↑こちらから確認できます。
いろいろカスタマイズできて便利です。
JavaScriptのおすすめ参考書
ポチップ
ポチップ
