背景画像を簡単にスライドショーすることができるjQueryプラグインのVegas2について説明します．
こんな感じのものが作れます．
See the Pen
Vegas2 by Yoshitaka (@YOSHITAKA3)
on CodePen.
Vegas2の設定
CDN
こちらのページにアクセスします．
vegas.cssとvegas.jsを<head>で読み込みます．
各ファイル
htmlファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <!--vegas.css読み込み--> <!--css読み込み--> <!--jQuery読み込み--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!--vegas.js読み込み--> <script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.js"></script> |
|
1 |
jsファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(function(){ $('#slideshow').vegas({ slides: [ { src: 'top_main_01.jpg' }, { src: 'top_main_02.jpg' }, { src: 'top_main_03.jpg' } ], delay: 7000, timer: false, transition: 'fade', timer:true, }); }); |
jsファイルのオプションについては，以下サイトが使えます．
ボタンをクリックすると，オプション部が反映されて，どんな感じになるかわかります．
