はじめに

おしゃれだけど、いまいち思い通りに動かないVegas Background SlideShowのおぼえがき。
実際にわたしが授業中に質問を受けた部分についての対応を記載します。

随時更新予定。

hoge.html

<div id="slider"></div>

hoge.css

#slider{
    width:100%;
    height:100vh;
}

hoge.js

$('#slider').vegas({
    //vegasの設定
    //ここの書き方は本質でないので、公式ドキュメントや他のサイトとか参考にしてください
})

jsファイルでの設定

hoge.js

$('#slider').vegas({
    //…
   timer:false,
    //…
})

timerをfalseに。デフォルトはtrue。
以下公式のtimerオプションに関する説明。

Display/hide timer bar.
The timer class is .vegas-timer-progress .

某テキストにはtimerについての記載がなかったので、公式ドキュメントを読みにいかないとわからなかったやつ。

100vhを指定しているのにリサイズ時にheightが変わらない。
widthはちゃんと伸縮する。

ちゃんとVegasの中身まで読みに行ったわけではないが、htmlタグにstyle="height"が追加されて、どうもそれが優先されているので、!important;で対応。

hoge.css

#slider{
    width:100%;
    height:100vh !important;
}

おしゃれなプラグインっていまいち思い通りにならないよね。