背景画像を簡単にスライドショーすることができる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ファイルのオプションについては,以下サイトが使えます.
ボタンをクリックすると,オプション部が反映されて,どんな感じになるかわかります.