JS

HTMLの書き方

head終了タグ直前にslickのCSSと自作のCSSの2つを読み込みます。

<link rel="stylesheet" type="text/css" href="httpss://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" type="text/css" href="css/6-1-9.css">
</head>

body内のスライドを表示させたい場所にHTMLを記載します。

<div class="slider">
	<ul class="slider-top">
		<li class="slider-item slider-item01"></li>
		<li class="slider-item slider-item02"></li>
		<li class="slider-item slider-item03"></li>
	</ul>
	<ul class="slider-bottom" dir="rtl"><!--/スライダの表示方向を左⇒右に変更するためにdir="rtl"を追加-->
		<li class="slider-item slider-item04"></li>
		<li class="slider-item slider-item05"></li>
		<li class="slider-item slider-item06"></li>
	</ul>
<!--/slider--></div>

body 終了タグ直前に jQuery、slick、動きを制御する自作のJS の3 つを読み込みます。

<script src="httpss://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="httpss://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!--自作のJS-->
<script src="js/6-1-9.js"></script>
</body>

CSSの書き方

/*==================================================
スライダーのためのcss
===================================*/
.slider {
	position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

.slider-top,
.slider-bottom {
	height: 50vh;/*スライダー上下の縦幅を画面の高さの半分（50vh）にする*/
}

/*　背景画像設定　*/
.slider-item01 {
	background:url(../img/img_01.jpg);
}

.slider-item02 {
	background:url(../img/img_02.jpg);
}

.slider-item03 {
	background:url(../img/img_03.jpg);
}

.slider-item04 {
	background:url(../img/img_04.jpg);
}

.slider-item05 {
	background:url(../img/img_05.jpg);
}

.slider-item06 {
	background:url(../img/img_06.jpg);
}

.slider-item {
	width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
	height:50vh;/*各スライダーの縦幅を画面の高さの半分（50vh）にする*/
	background-repeat: no-repeat;/*背景画像をリピートしない*/
	background-position: center;/*背景画像の位置を中央に*/
	background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

JSの書き方

//スライド上の設定
$('.slider-top').slick({
	accessibility: false,// 左右矢印ボタンでの切り替えなし
	arrows: false,//左右矢印ボタン表示なし
	autoplay: true,//自動的に動き出すか。初期値はfalse。
	pauseOnHover: false,//オンマウスでスライドを一時停止させるかどうか。初期値はtrue。
	pauseOnFocus: false,//フォーカスした際にスライドを一時停止させるかどうか。初期値はtrue。
	slidesToShow: 1,//スライドを画面に1枚見せる
	slidesToScroll: 1,//1回のスクロールで1枚の写真を移動して見せる
	swipe: false,//タッチスワイプに対応しない
});

//スライド下の設定
$('.slider-bottom').slick({
	accessibility: false,// 左右矢印ボタンでの切り替えなし
	arrows: false,//左右矢印ボタン表示なし
	autoplay: true,//自動的に動き出すか。初期値はfalse。
	pauseOnHover: false,//オンマウスでスライドを一時停止させるかどうか。初期値はtrue。
	pauseOnFocus: false,//フォーカスした際にスライドを一時停止させるかどうか。初期値はtrue。
	slidesToShow: 1,//スライドを画面に1枚見せる
	slidesToScroll: 1,//1回のスクロールで1枚の写真を移動して見せる
	swipe: false,//タッチスワイプに対応しない
	rtl: true,//スライダの表示方向を左⇒右に変更する
});