【JS】slick.js｜サムネイル付きで縦に配置する

スライダー機能を簡単に導入できるslick.jsを使う場合、通常は下にサムネイル挿入されているものがほとんどです。
ですが、サムネイル付きのスライダーは２つのスライダーを使用しているので自由に位置の変更や修正ができます。
また、スクロールさせずにフォーカスと切り替えを行うようにする部分は下記を参考にしています。

slick.jsでサムネイル付きスライダーを作成する

何度か取り上げているslick.jsの使い方ですが、今回はサムネイル付きスライダーを作成します。サムネイルがスライダーのものや、サムネイルを固定した（サムネイルをスライドさせない）スライダーなどいくつ...続きを読む

takblog.site

ここではslickの基本導入が設定されている前提でソースを紹介しますので、実装がまだの場合は下記を参考にslickの実装をしてください。

スライダーをslick.jsを使用して実装する方法

スライダーを導入する時に全て自作でとなると相当大変な上に変な動きになったりしてしまい、上手くいかないことが多いかと思います。 そんな時はツールを使うと簡単に実装することが出来ます。 ここではslick...続きを読む

3rdcom.biz

2022.04.09

HTMLソース

<div class="top_text_area">
	<div class="slider_outer2">
		<ul class="thumb1_2">
			<li class="thumbnail-item">
				<img src="img/001.jpg" alt="画像">
			</li>
			<li class="thumbnail-item">
				<img src="img/002.jpg" alt="画像">
			</li>
			<li class="thumbnail-item">
				<img src="img/003.jpg" alt="画像">
			</li>
			<li class="thumbnail-item">
				<img src="img/004.jpg" alt="画像">
			</li>
			<li class="thumbnail-item">
				<img src="img/005.jpg" alt="画像">
			</li>
		</ul>
		<ul class="slider1_2">
			<li class="slide-item">
				<img src="img/001.jpg" alt="画像">
			</li>
			<li class="slide-item">
				<img src="img/002.jpg" alt="画像">
			</li>
			<li class="slide-item">
				<img src="img/003.jpg" alt="画像">
			</li>
			<li class="slide-item">
				<img src="img/004.jpg" alt="画像">
			</li>
			<li class="slide-item">
				<img src="img/005.jpg" alt="画像">
			</li>
		</ul>
	</div>
</div>

CSS

.slider_outer2 {
	width: 50%;
	height: auto;
	margin: 1vw auto;
	position: relative;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	-ms-flex-line-pack: center;
	align-content: center;
}
.slider_outer2 .slider1_2 {
	width: 85%;
	height: auto;
        margin: 0 auto;
        padding: 0;
}
.slider_outer2 .slick-track {
	height: 100%;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	-ms-flex-line-pack: center;
	align-content: center;
}
.slider_outer2 .slide-item img {
	width: 100%;
	height: 100%;
}
.slider_outer2 .thumb1_2 {
	width: 10%;
	height: auto;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.slider_outer2 .thumbnail-item {
	margin-top: 10px;
	box-sizing: border-box;
	position: relative;
}
.slider_outer2 .thumbnail-item:after {
	content: '';
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: .3s opacity linear;
}
.slider_outer2 .thumbnail-item.thumbnail-current:after {
	opacity: 0;
}
.slider_outer2 .thumbnail-item img {
	width: 100%;
	margin: 0 auto;
}

JS

<script> 
$(function() { 
	var slider = ".slider1_2";// スライダー 
	var thumb = ".thumb1_2";// サムネイル 
	var thumbitem = thumb + " .thumbnail-item";	// サムネイル内のアイテム 
	// サムネイル画像アイテムに data-index でindex番号を付与 
	$(thumbitem).each(function(){ var index = $(thumbitem).index(this);
		$(this).attr("data-index",index);
	});
	// スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける 
	$(slider).on('init',function(slick){
		var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index");
		$(thumbitem+'[data-index="'+index+'"]').addClass("thumbnail-current");
	});
	//サムネイル画像アイテムをクリックしたときにスライダー切り替え 
	$(thumbitem).on('click',function(){
		var index = $(this).attr("data-index");
		$(slider).slick("slickGoTo",index,false);
	});
	//サムネイルフォーカス 
	$(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){
		$(thumbitem).each(function(){ $(this).removeClass("thumbnail-current");});
		$(thumbitem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current");
	});
	//スライダー設定 
	$(slider).slick({ 
		autoplay: true, 
		arrows: false, 
		fade: true, 
		infinite: true 
	});
});
</script>

2022/6/30

一部ソースに誤りがあったので修正しました。

デモページ