Vegas Background SlideShow おぼえがき

はじめに

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

随時更新予定。

前提

hoge.html

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

hoge.css

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

hoge.js

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

jsファイルでの設定

Q.スライドの下のバーを消したい

Answer

hoge.js

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

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

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

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

cssファイルでの設定

Q.リサイズした時にheightが変わらない

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

Answer

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

hoge.css

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

おわりに

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