【slick.js】Apple風 ドットで残り時間を表現するスライダーの作り方

HTML

HTMLはこんな感じ｡ 普通にslickスライダーを作成します｡

<div class="slider">
	<div class="slide"><img src="img01.jpg"></div>
	<div class="slide"><img src="img02.jpg"></div>
	<div class="slide"><img src="img03.jpg"></div>
	<div class="slide"><img src="img04.jpg"></div>
</div>

JS

JSはこんな感じ｡ごく普通にslickを実行します｡

$(".slider").slick({
	autoplay: true,
	autoplaySpeed: 4000, //自動再生のスピード4秒
	speed: 1000, //アニメーションの速度1秒
	dots: true, //dotsはtrueに
	centerMode: true,
	variableWidth: true,
	cssEase: "cubic-bezier(.8,0,.2,1)"
});

オプションはお好みで構いませんが､dotsはtrueにするのと
autoplaySpeed､speedの値は明示した方がいいです｡今回はそれぞれ4秒､1秒でいきます｡

CSS

あとはCSSで整えていきます｡アニメーションもCSSで付けます｡

/* slider */
.slider {
	display: flex; /* dotsを中央寄せにするため､flexに */
	flex-direction: column;
	align-items: center;
}
.slick-list {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 30px;
}

/* slide (ここはお好みで) */
.slick-slide {
	margin: 0 10px;
	border-radius: 16px;
	overflow: hidden;
}

/* dots */
.slider .slick-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	bottom: auto;
	width: auto;
	height: 56px;
	padding: 0 20px;
	border-radius: 28px;
	background: #EFEFF2;
}
.slick-dots li {
	width: auto;
	height: 8px;
	margin: 0 8px;
}
.slick-dots li button {
	display: block;
	position: relative;
	width: 8px;
	height: 100%;
	padding: 0;
	border-radius: 4px;
	background: #707073;
	transition: 1s; /* speed と同じ値に */
}
.slick-dots li button:before {
	display: none;
}
.slick-dots li.slick-active button {
	width: 70px;
}
.slick-dots li.slick-active button::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 8px;
	height: 100%;
	border-radius: 4px;
	background: #29292A;
	overflow: hidden;
	animation: slick_dot 4s 1s linear forwards; /* durationはautoplaySpeed､delayはspeedと同じ値に */
}
@keyframes slick_dot {
	0% {width: 8px;}
	100% {width: 100%;}
}

これでサンプルのような形になります｡

HTML

普通にスライダーを作成します｡

<div class="slider">
	<div class="slide"><img src="img01.jpg"></div>
	<div class="slide"><img src="img02.jpg"></div>
	<div class="slide"><img src="img03.jpg"></div>
	<div class="slide"><img src="img04.jpg"></div>
</div>

JS

slickを実行した後.slick-dotsの後に一時停止ボタンを挿入します｡

$(".slider").slick({
	autoplay: true,
	autoplaySpeed: 4000, //自動再生のスピード4秒
	speed: 1000, //アニメーションの速度1秒
	dots: true, //dotsはtrueに
	centerMode: true,
	variableWidth: true,
	cssEase: "cubic-bezier(.8,0,.2,1)"
});
//dotsの次に一時停止ボタンを挿入
$(".slider.slick-initialized .slick-dots").after('<button class="slick_pause">一時停止</button>');
//ボタンをクリックしたとき
$(".slick_pause").on("click", function() {
	//一時停止中なら
	if($(this).hasClass("paused")){
		//再開
		$(".slider").slick("slickPlay");
		//「.paused」削除
		$(this).removeClass("paused");
		$(".slider").removeClass("paused");
	}else{
		//再生中なら
		//一時停止
		$(".slider").slick("slickPause");
		//「.paused」付与
		$(this).addClass("paused");
		$(".slider").addClass("paused");
	}
});

slickで一時停止ボタンの作り方はこちらで詳しく解説しています｡