<!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://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js">
</script>
<style>@charset "utf-8";
/*==================================================
スライダーのためのcss
===================================*/
.slider {
position: relative;
z-index: 1;
/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
height: 100vh; /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/* 背景画像設定 */
/* なぜか背景が表示されない
.slider-item01 {
background: url("/wp-content/uploads/demos/_assets/img_01.jpg");
}
.slider-item02 {
background: url("/wp-content/uploads/demos/_assets/img_02.jpg");
}
.slider-item03 {
background: url("/wp-content/uploads/demos/_assets/img_03.jpg");
}
*/
.slider-item img {
width: 100%; /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
height: 100vh; /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
background-repeat: no-repeat; /*背景画像をリピートしない*/
background-position: center; /*背景画像の位置を中央に*/
background-size: cover; /*背景画像が.slider-item全体を覆い表示*/
object-fit: cover; /*画像の縦横比を保持したまま画像を中央表示*/
}
/*矢印の設定*/
.slick-prev,
.slick-next {
position: absolute;
z-index: 3;
top: 42%;
cursor: pointer; /*マウスカーソルを指マークに*/
outline: none; /*クリックをしたら出てくる枠線を消す*/
border-top: 2px solid #fff; /*矢印の色*/
border-right: 2px solid #fff; /*矢印の色*/
height: 25px;
width: 25px;
}
.slick-prev {
/*戻る矢印の位置と形状*/
left: 2.5%;
transform: rotate(-135deg);
}
.slick-next {
/*次へ矢印の位置と形状*/
right: 2.5%;
transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
position: relative;
z-index: 3;
text-align: center;
margin: -50px 0 0 0; /*ドットの位置*/
}
.slick-dots li {
display: inline-block;
margin: 0 5px;
}
.slick-dots button {
color: transparent;
outline: none;
width: 8px; /*ドットボタンのサイズ*/
height: 8px; /*ドットボタンのサイズ*/
display: block;
border-radius: 50%;
background: #fff; /*ドットボタンの色*/
}
.slick-dots .slick-active button {
background: #333; /*ドットボタンの現在地表示の色*/
}
/*========= レイアウトのためのCSS ===============*/
ul {
margin: 0;
padding: 0;
list-style: none;
}
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">
<h1>Slide show</h1>
<ul class="slider">
<li class="slider-item">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/img_01.jpg" />
</li>
<!-- 横幅を広げると「object-position: 50% 30%」で中央やや上の画像を表示 -->
<li class="slider-item">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/img_02.jpg" style="object-position: 50% 30%" />
</li>
<li class="slider-item">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/img_03.jpg" />
</li>
<!--
なぜか背景が表示されない
background: url("xxx");が動かない
<li class="slider-item slider-item01">
</li>
<li class="slider-item slider-item02">
</li>
<li class="slider-item slider-item03">
</li>
-->
</ul>
<!--/wrapper-->
</div>
<div class="container">
<p>使用したライブラリ：<a href="https://kenwheeler.github.io/slick/" target="_blank">https://kenwheeler.github.io/slick/</a>
</p>
<!--/container-->
</div>
<script>$(".slider").slick({
fade: true, //切り替えをフェードで行う。初期値はfalse。
autoplay: true, //自動的に動き出すか。初期値はfalse。
autoplaySpeed: 3000, //次のスライドに切り替わる待ち時間
speed: 1000, //スライドの動きのスピード。初期値は300。
infinite: true, //スライドをループさせるかどうか。初期値はtrue。
slidesToShow: 1, //スライドを画面に3枚見せる
slidesToScroll: 1, //1回のスクロールで3枚の写真を移動して見せる
arrows: true, //左右の矢印あり
prevArrow: '<div class="slick-prev">
</div>', //矢印部分PreviewのHTMLを変更
nextArrow: '<div class="slick-next">
</div>', //矢印部分NextのHTMLを変更
dots: true, //下部ドットナビゲーションの表示
pauseOnFocus: false, //フォーカスで一時停止を無効
pauseOnHover: false, //マウスホバーで一時停止を無効
pauseOnDotsHover: false //ドットナビゲーションをマウスホバーで一時停止を無効
});
//スマホ用：スライダーをタッチしても止めずにスライドをさせたい場合
$(".slider").on("touchmove", function (event, slick, currentSlide, nextSlide) {
$(".slider").slick("slickPlay");
});
//# sourceURL=pen.js</script>
</body>
</html>