スライドショー（vegas）の解説

※当ページの解説以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。

vegas 公式サイト：https://vegas.jaysalvat.com/
オプション一覧：https://vegas.jaysalvat.com/documentation/settings/
トランジション一覧：https://vegas.jaysalvat.com/documentation/transitions/

上記の「トランジション一覧」で、色々なスライドショーのパターンを見る事ができます。お好みで設定を変更してみて下さい。jsフォルダのvegas.jsの値を変更するだけです。

画像を入れ替える場合や、枚数を変更したい場合。
画像を入れ替えたい場合は、imagesフォルダの1.jpg〜3.jpgを上書きして下さい。
枚数を変更する場合や画像ファイル名を変更する場合は、jsフォルダのvegas.jsを開いて編集して下さい。枚数追加は、既存の画像読み込み行をコピペして画像ファイル名を入れ替えるだけでOKです。

画像のレスポンシブ比率を変更したい場合
ダウンロード用のセットでは、主に16:9の画像がレスポンシブになるようcssで設定されています。
この比率以外でも問題なく表示されますが、部分的に切り抜かれるので、16:9以外の比率の画像を全部表示させたければ以下を調整して下さい。
cssフォルダのstyle.cssの、
#mainimg-box {
の中にある、
padding-top: 56.25%;
を調整します。56.25というのは、9÷16=56.25の事です。
もし、3:2の画像を使いたければ、2÷3=66.66
padding-top: 66.66%;
と書き直せばOKです。

vegasを使う為に必要なタグ、ファイル類。
1. html冒頭のhead内にある「vegas.min.css」の読み込みの１行。
2. htmlにある「スライドショー」のブロック。
3. html下部にある「jQueryの読み込み」のブロック。※下のjsファイルより先に読み込んで下さい。
4. その下の「スライドショー（vegas）」のブロック。
5. jsフォルダ内の「vegas.js」。

何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、CDNから読み込んでいるjQueryのバージョン及びvegas関連のファイルのバージョンを変更して動作するか確認してみて下さい。