<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.js">
</script>
<style>@charset "utf-8";
/*==================================================
スライダーのためのcss
===================================*/
#slider {
width: 100%;
height: 100vh; /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*========= レイアウトのためのCSS ===============*/
a {
color: #fff;
}
a:hover,
a:active {
text-decoration: none;
}
h1 {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 6vw;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
}
.wrapper {
position: relative;
}
.container {
background: #555;
}
.container p {
padding: 300px 0;
text-align: center;
color: #fff;
}</style>
</head>
<body>
<body>
<div class="wrapper">
<div id="slider">
<h1>Slide show</h1>
<!--/slider-->
</div>
<!--/wrapper-->
</div>
<div class="container">
<p>使用したライブラリ：<a href="https://vegas.jaysalvat.com/" target="_blank">https://vegas.jaysalvat.com/</a>
</p>
<!--/container-->
</div>
<script>//画像の設定
var windowwidth =
window.innerWidth || document.documentElement.clientWidth || 0;
if (windowwidth > 768) {
var responsiveImage = [
//PC用の画像
{ src: "/wp-content/uploads/demos/_assets/img_01.jpg" },
{ src: "/wp-content/uploads/demos/_assets/img_02.jpg" },
{ src: "/wp-content/uploads/demos/_assets/img_03.jpg" }];
} else {
var responsiveImage = [
//タブレットサイズ（768px）以下用の画像
{
src:
"/wp-content/uploads/demos/_assets/img_01.jpg" },
{
src:
"/wp-content/uploads/demos/_assets/img_02.jpg" },
{
src:
"/wp-content/uploads/demos/_assets/img_03.jpg" }];
}
//Vegas全体の設定
$("#slider").vegas({
overlay: true, //画像の上に網線やドットのオーバーレイパターン画像を指定。
transition: "flash2", //切り替わりのアニメーション。http://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", //スライドアニメーションの種類。http://vegas.jaysalvat.com/documentation/transitions/参照。kenburns、kenburnsUp、kenburnsDown、kenburnsRight、kenburnsLeft、kenburnsUpLeft、kenburnsUpRight、kenburnsDownLeft、kenburnsDownRight、randomが設定可能。
slides: responsiveImage //画像設定を読む
});
//# sourceURL=pen.js</script>
</body>
</html>