HTMLの書き方
head終了タグ直前にVegas Background SlideShowのCSSと自作のCSSの2つを読み込みます。
<link rel="stylesheet" type="text/css" href="httpss://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.css">
<link rel="stylesheet" type="text/css" href="css/6-1-5.css">
</head>
body内のスライドを表示させたい場所にHTMLを記載します。
<div id="slider"></div>body 終了タグ直前に jQuery、Vegas Background SlideShow、動きを制御する自作のJS の3 つを読み込みます。
<script src="httpss://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="httpss://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.js"></script>
<!--自作のJS-->
<script src="js/6-1-5.js"></script>
</body>
CSSの書き方
#slider {
width: 100%;
height: 100vh; /* スライダー全体の縦幅を画面の高さいっぱい（100vh）にする */
}
JSの書き方
//画像と動画の設定
var windowwidth = window.innerWidth || document.documentElement.clientWidth || 0;
if (windowwidth > 768){
varresponsiveImage = [ //PC用の動画と画像
{ src: './img/img_01.jpg',//動画が再生されなかった場合の代替画像
video: {
src: [ //mp4で動画が再生されない時のことを考えて複数の形式の動画を設定
'./video/movie.mp4'
'./video/movie.webm',
'./video/movie.ogv'
],
loop: false, //動画を繰り返さない
mute: true, //動画の音を鳴らさない
}
},
{ src: './img/img_02.jpg' },
{ src: './img/img_03.jpg' }
];
} else {
var responsiveImage = [ //タブレットサイズ（768px）以下用の画像
{ src: './img/img_sp_01.jpg' },
{ src: './img/img_sp_02.jpg' },
{ src: './img/img_sp_03.jpg' }
];
}
// Vegas全体の設定
$('#slider').vegas({
overlay: true, //画像の上に網線やドットのオーバーレイパターン画像を指定。
transition: 'fade2', //切り替わりのアニメーション。https://vegas.jaysalvat.com/documentation/transitions/参照。fade、fade2、slideLeft、slideLeft2、slideRight、slideRight2、slideUp、slideUp2、slideDown、slideDown2、zoomIn、zoomIn2、zoomOut、zoomOut2、swirlLeft、swirlLeft2、swirlRight、swirlRight2、burnburn2、blurblur2、flash、flash2が設定可能。
transitionDuration: 2000, //切り替わりのアニメーション時間をミリ秒単位で設定
delay: 5000, //スライド間の遅延をミリ秒単位で。
animationDuration: 20000, //スライドアニメーション時間をミリ秒単位で設定
animation: 'random', //スライドアニメーションの種類。https://vegas.jaysalvat.com/documentation/transitions/参照。kenburns、kenburnsUp、kenburnsDown、kenburnsRight、kenburnsLeft、kenburnsUpLeft、kenburnsUpRight、kenburnsDownLeft、kenburnsDownRight、randomが設定可能。
slides: responsiveImage, //画像と動画の設定を読む
//timer:false, //プログレスバーを非表示したい場合はこのコメントアウトを外してください
});