WEBデザイナーAkiの備忘録

画面いっぱいに背景画像をスライドさせる「Vegas2」

2019.4.26 ,

jQuery「Vegas2」を使って背景画像でスライダーを作ってみました。

全画面スライドを表示しつつ、パララックスもする…という案件があったので、背景スライダーを探していたのです。
なので、デモはパララックスも入ったものになっています。

デモ

デモサイトはこちら

ダウンロード

ひとまず「Vegas2の公式サイト」から一式をダウンロードします。

色々入ってますが、必要なファイルは「vegas.min.js」「vegas.min.css」「overlaysフォルダ」です。

設定

上記のファイルを設置したいフォルダに入れていきます。

html設定

まずはjsとcssをhead内に読み込みます。もちろんjqueryも必要です。

css設定

スライダーが入る枠組みを100%指定しておきます。これで全画面になります。
※デモはパララックスしてるのでbodyにつけてます。

js設定

最後に、画像を読み込むjsを設定します。今回bodyに読み込んでいるので、bodyが入っているところには任意のIDを入れるとよいです。

オプション

むちゃくちゃ沢山オプションがあります!公式のセッティングページを参考に追加すると、とてもオシャンなスライダーができます。

個人的に、上記のようにフィルタをかけられるのがおおー!って感じでした。

コメント