KH-WEBLOG TOP > WEBメモ > JavaScript > 背景画像スライダー「Vegas2」の使い方:jQuery

背景画像スライダー「Vegas2」の使い方:jQuery

背景画像をスライドさせるjQueryプラグイン「Vegas2」の使い方メモ。

コーディング・WordPress化作業を代行します

vegas.jsのダウンロード

まずは公式サイトかGitHubからダウンロードします。

公式サイト
GitHub

ダウンロードしたzipファイルの中から、
vegas.min.cssvegas.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/
↑こちらから確認できます。

いろいろカスタマイズできて便利です。

コーディング・WordPress化作業を代行します

JavaScriptのおすすめ参考書

楽天ブックス
¥2,838 (2024/03/25 02:06時点 | 楽天市場調べ)

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード ソースコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事