公式
スライドショーしてくれます。
切り替えエフェクトがすんごい豊富です。スタイリッシュでかっこいい。
あまりのかっこよさにこのサイトのインデックスページの背景に使用しました。
画像だけでなく動画にも対応しているそうですが、とりあえず画像について記述します。
いつものごとくサンプルでは自由にカスタムができて、その設定を出力するようにしてあります。
2019.08
公式サイトの右下にあるDOWNLOADの「vegas.zip」手に入れ、解凍しましょう。
解凍した「vegas」フォルダごと自サイトの場所へコピーします。
まず、headerに以下のコードをコピペします。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="ファイルの場所/vegas.min.css"> <script src="ファイルの場所/vegas.min.js"></script> <script type="text/javascript"> $(function(){ $('body').vegas({ slides: [ { src: '画像1' }, { src: '画像2' }, { src: '画像3' }, ], //ここでオプション設定 }); }); </script>
2、3行目のファイルの場所は書き換えてください。
8~10行目に画像のパスを設定します。必要数「{ src: '画像のパス' },」の形で羅列していってください。
12行目がオプション設定部分です。詳細はこちらにまとめました。
上のコードでは5行目部分でbodyを指定していますが、背景全体は嫌、ここの部分だけでスライドショーしてほしいっていう方はそこの要素を指定してください。
別窓
例えばこんなことができます。いらすとやさんありがとごじます。
Vegasをさせたい要素にクラス名が<div class="toothpaste">のように設定してあれば、6行目を「$('.toothpaste').vegas({」とします。
要素にIDを<div id="toothpaste">のように設定してあれば、6行目を「$('#toothpaste').vegas({」とします。
また、スライドごとに設定できるオプションがあります。
slidesに設定した画像のパスの後ろに、こんな感じでカンマで区切って羅列します。
slides: [ { src: '画像1'}, { src: '画像2', transition: 'zoomOut', delay: 3000 }, { src: '画像3' }, ],この例なら画像2のみzoomOutし、3秒で次のスライドに行くようになります。
サンプルをいじると設定値を出力してくれるので、好きな設定を選んでこの部分に差し替えてください。
オプション名 | 適当な説明 | 設定値 | デフォルト値 | 個別指定 |
---|---|---|---|---|
slide | 何枚目のスライドから始めるかの設定。最初のスライドは0番目です。 | 0~スライド枚数-1の範囲の整数 | 0 | |
preload | 画像と動画両方をプリロードとかいう先行読み込みをするか。大きな画像や動画だと効果があるみたいです。 | するならtrue、しないならfalse | false | |
preloadImage |
画像のみプリロードとかいう先行読み込みをするか。 ここをtrueにするなら、preloadはfalseにします。 |
するならtrue、しないならfalse | false | |
preloadVideo |
動画のみプリロードとかいう先行読み込みをするか。 ここをtrueにするなら、preloadはfalseにします。 |
するならtrue、しないならfalse | false | |
timer |
画像下部にタイマーバーを表示するか。 タイマーバーのカスタマイズをしたい方は「.vegas-timer-progress」をいじってください。 |
表示するならtrue、表示しないならfalse | true | |
overlay |
画像にイメージをオーバーレイするかどうか。 「overlays」というフォルダに9種類のドットパターンが用意されているので、そのパスを指定してもOK。 画像をオーバーレイさせたいならこれらのドットパターンのように画像のパスを指定すればいいですが、cssで作ったものをオーバーレイさせたい場合はtrueにして、「.vegas-overlay」をいじってください。サンプルでは虹色にしてみました。 |
trueかfalse、または画像のパス | false | |
autoplay |
スライドショーを自動的に開始するかどうか。 |
するならtrue、しないならfalse | true | |
loop |
スライドショーをループさせるかどうか。 |
するならtrue、しないならfalse | true | |
shuffle |
スライドの表示順番をシャッフルするかどうか。 |
するならtrue、しないならfalse | false | |
delay |
次のスライドを表示するまでの時間。 |
整数。単位はミリ秒。 | 5000 | 〇 |
cover |
画像のサイズを調整できます。
trueなら表示させる所の大きさに合わせて何もない部分がないように拡大縮小され、falseなら表示させる所に画像全体が表示されるように拡大縮小されます。 'repeat'にすると画像はそのままのサイズで、表示させる所いっぱいに画像が繰り返されます。 |
null | 〇 | |
color |
スライドの背景色。 coverがtrueだと空白部分がないのであまり意味がないですが、透過画像やcoverがtrue以外の場合は設定した方がいいです。 |
'#f2f2f2', 'whitesmoke', '#000'等のカラーコードや色の文字列 | true | 〇 |
align |
横方向の配置。これもcoverがtrueだと意味ない気がします。 中央寄せ、右寄せ、左寄せ、またはパーセントで割合指定もできます。 公式の説明に'top''bottom'があったのでいちおう設定値にも記述しましたが、横方向の話なのでこの二つは意味ないと思います。 |
'center' 'top' 'right' 'bottom' 'left'、または'n%'のようなパーセンテージ指定 | 'center' | 〇 |
valign |
縦方向の配置。これもcoverがtrueだと意味ない気がします。 中央寄せ、上寄せ、下寄せ、またはパーセントで割合指定もできます。 公式の説明に'right''left'があったのでいちおう設定値にも記述しましたが、縦方向の話なのでこの二つは意味ないと思います。 |
'center' 'top' 'right' 'bottom' 'left'、または'n%'のようなパーセンテージ指定 | 'center' | 〇 |
transition | 次のスライドに遷移するときの切り替えエフェクト。なんかいっぱい種類がある。 | 'fade', 'fade2', 'blur', 'blur2', 'flash', 'flash2', 'negative', 'negative2','burn', 'burn2', 'slideLeft', 'slideLeft2', 'slideRight', 'slideRight2','slideUp', 'slideUp2', 'slideDown', 'slideDown2', 'zoomIn', 'zoomIn2','zoomOut', 'zoomOut2','swirlLeft', 'swirlLeft2', 'swirlRight', 'swirlRight2' または'random' |
'fade' | 〇 |
transitionDuration |
transitionしている時間。 'auto'を指定するとdelayの設定値と同じになります。 |
整数。単位はミリ秒。または'auto'。 | 1000 | 〇 |
firstTransition | 最初に再生されるスライドのtransition。 | transitionの設定値を参照 | null | |
firstTransitionDuration | 最初に再生されるスライドのtransitionDuration。 | transitionDurationの設定値を参照 | null | |
animation | スライドを表示中にするアニメーションを設定します。めちゃくちゃかっこいいと思います。 | 'kenburns', 'kenburnsLeft', 'kenburnsRight', 'kenburnsUp', 'kenburnsUpLeft', 'kenburnsUpRight','kenburnsDown', 'kenburnsDownLeft', 'kenburnsDownRight' または'random' |
null | 〇 |
animationDuration |
animationしている時間。 'auto'を指定するとdelayの設定値と同じになります。 |
整数。単位はミリ秒。または'auto'。 | 'auto' | 〇 |
slidesToKeep |
次のスライドに行く前にバックグラウンドで保持するスライドの数。 coverがtrueだと気にならないかもしれませんが、falseでスライドの大きさが揃っていないと前のスライドが背景にはみ出ることになります。 |
0~スライド枚数の範囲の整数 | 1 |