ポートフォリオなどで使えるサムネイルが縦に並んだスライダー

※当サイトにはプロモーションが含まれています。

クライアント

自社の商品を紹介するのに縦のスライダーを作ってくれ

にゃテック

おけまるだにゃ

今回、紹介するサムネイルが縦に並んだスライダーは、製品ギャラリーやポートフォリオサイト、不動産サイトなどに使えるのではないかと思います。

動作確認は、こちらから可能です。

サムネイル画像が縦に並んだスライダーのデモを確認

サムネイルが縦のスライダーを作成してみた

サムネイル画像が縦に並び、それぞれ順番に表示していくスライダーです。

HTML

<div class="vertical-slider">
<ul id="main-vertical-1" class="list-slider" data-offer-id="1">
<li id="offer-slide-1-0"><img class="image" src="https://via.placeholder.com/600/FF0000/FFFFFF" alt="赤い画像"></li>
<li class="d-none" id="offer-slide-1-1"><img class="image" src="https://via.placeholder.com/600/00FF00/FFFFFF" alt="緑の画像"></li>
<li class="d-none" id="offer-slide-1-2"><img class="image" src="https://via.placeholder.com/600/0000FF/FFFFFF" alt="青い画像"></li>
<li class="d-none" id="offer-slide-1-3"><img class="image" src="https://via.placeholder.com/600/FFFF00/FFFFFF" alt="黄色の画像"></li>
<li class="d-none" id="offer-slide-1-4"><img class="image" src="https://via.placeholder.com/600/FF00FF/FFFFFF" alt="マゼンタの画像"></li>
</ul>
<ul id="thumbnail-1" class="list-thumbnail">
<li data-offer-id="1" data-thumb-num="0" id="thumb-1-0" class="thumb-opacity"><img class="image" src="https://via.placeholder.com/200/FF0000/FFFFFF" alt="赤い画像"></li>
<li data-offer-id="1" data-thumb-num="1" id="thumb-1-1"><img class="image" src="https://via.placeholder.com/200/00FF00/FFFFFF" alt="緑の画像"></li>
<li data-offer-id="1" data-thumb-num="2" id="thumb-1-2"><img class="image" src="https://via.placeholder.com/200/0000FF/FFFFFF" alt="青い画像"></li>
<li data-offer-id="1" data-thumb-num="3" id="thumb-1-3"><img class="image" src="https://via.placeholder.com/200/FFFF00/FFFFFF" alt="黄色の画像"></li>
<li data-offer-id="1" data-thumb-num="4" id="thumb-1-4"><img class="image" src="https://via.placeholder.com/200/FF00FF/FFFFFF" alt="マゼンタの画像"></li>
</ul>
</div>

CSS

/*---- メインとサムネイルの分割 ----*/
.vertical-slider {
display: flex;
justify-content: center;
}

/*---- メイン部分 ----*/
.list-slider {
flex: 0 0 79%;
margin-right: 15px;
list-style: none;
padding: 0;
}

/*---- サムネイル部分 ----*/
.list-thumbnail {
height: 100%;
flex-direction: column;
display: flex;
justify-content: space-between;
flex: 0 0 14%;
list-style: none;
padding: 0;
}

.list-thumbnail li {
cursor: pointer;
margin-bottom: 8px;
flex: 0 0 18%;
}

.list-thumbnail li:last-child {
margin-bottom: 0;
}

.list-thumbnail li.thumb-opacity img {
opacity: 0.6;
}

/*---- 画像の表示・非表示 ----*/
.d-none {
display: none;
}

.image {
width: 100%;
height: auto;
}

@media (max-width: 767px) {
.list-thumbnail {
display: none;
}
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
let currentIndex = 0;
const offerId = 1;
const mainVertical = document.getElementById('main-vertical-' + offerId);
const totalSlides = mainVertical.children.length;

function photoFade(offerId, thumbNum) {
const mainVertical = document.getElementById('main-vertical-' + offerId);
const thumbnails = document.getElementById('thumbnail-' + offerId);

Array.from(mainVertical.children).forEach((slide, index) => {
slide.classList.add('d-none');
if (index === thumbNum) {
slide.classList.remove('d-none');
}
});

Array.from(thumbnails.children).forEach((thumb, index) => {
thumb.classList.remove('thumb-opacity');
if (index === thumbNum) {
thumb.classList.add('thumb-opacity');
}
});
}

function autoSlide() {
currentIndex = (currentIndex + 1) % totalSlides;
photoFade(offerId, currentIndex);
}

const thumbnails = document.querySelectorAll(".list-thumbnail li");
thumbnails.forEach(function(thumbnail) {
thumbnail.addEventListener('click', function() {
let thumbNum = parseInt(this.getAttribute('data-thumb-num'));
currentIndex = thumbNum;
photoFade(offerId, thumbNum);
});
});

setInterval(autoSlide, 3000);

photoFade(offerId, currentIndex);
});

デフォルトでは、画像が５つになっていますが、画像を増やすことも可能です。

画像を増やす（減らす）場合は、下記の例を参考にして編集してみてください。

<div class="vertical-slider">
<ul id="main-vertical-1" class="list-slider" data-offer-id="1">
<li id="offer-slide-1-0"><img class="image" src="https://via.placeholder.com/600/FF0000/FFFFFF" alt="赤い画像"></li>
<li class="d-none" id="offer-slide-1-1"><img class="image" src="https://via.placeholder.com/600/00FF00/FFFFFF" alt="緑の画像"></li>
<li class="d-none" id="offer-slide-1-2"><img class="image" src="https://via.placeholder.com/600/0000FF/FFFFFF" alt="青い画像"></li>
<li class="d-none" id="offer-slide-1-3"><img class="image" src="https://via.placeholder.com/600/FFFF00/FFFFFF" alt="黄色の画像"></li>
<li class="d-none" id="offer-slide-1-4"><img class="image" src="https://via.placeholder.com/600/FF00FF/FFFFFF" alt="マゼンタの画像"></li>
<!-- 新しいスライド画像の追加 -->
<li class="d-none" id="offer-slide-1-5"><img class="image" src="https://via.placeholder.com/600/00FFFF/FFFFFF" alt="シアンの画像"></li>
<li class="d-none" id="offer-slide-1-6"><img class="image" src="https://via.placeholder.com/600/FF9900/FFFFFF" alt="オレンジの画像"></li>
</ul>
<ul id="thumbnail-1" class="list-thumbnail">
<li data-offer-id="1" data-thumb-num="0" id="thumb-1-0" class="thumb-opacity"><img class="image" src="https://via.placeholder.com/200/FF0000/FFFFFF" alt="赤い画像"></li>
<li data-offer-id="1" data-thumb-num="1" id="thumb-1-1"><img class="image" src="https://via.placeholder.com/200/00FF00/FFFFFF" alt="緑の画像"></li>
<li data-offer-id="1" data-thumb-num="2" id="thumb-1-2"><img class="image" src="https://via.placeholder.com/200/0000FF/FFFFFF" alt="青い画像"></li>
<li data-offer-id="1" data-thumb-num="3" id="thumb-1-3"><img class="image" src="https://via.placeholder.com/200/FFFF00/FFFFFF" alt="黄色の画像"></li>
<li data-offer-id="1" data-thumb-num="4" id="thumb-1-4"><img class="image" src="https://via.placeholder.com/200/FF00FF/FFFFFF" alt="マゼンタの画像"></li>
<!-- 新しいサムネイル画像の追加 -->
<li data-offer-id="1" data-thumb-num="5" id="thumb-1-5"><img class="image" src="https://via.placeholder.com/200/00FFFF/FFFFFF" alt="シアンの画像"></li>
<li data-offer-id="1" data-thumb-num="6" id="thumb-1-6"><img class="image" src="https://via.placeholder.com/200/FF9900/FFFFFF" alt="オレンジの画像"></li>
</ul>
</div>

注意点としては、id=”XX”、data-thumb-num=”X”の部分で、対応する画像を判断しているので、重複しないよう適切に番号を振ってください。

また、setInterval(autoSlide, 3000);で、スライドショーを自動的に進めるための間隔を設定しています。

デフォルトでは３秒に設定しているので、間隔を短くしたければ、2000（2秒）などにしてください。

楽天市場の検索結果

1冊ですべて身につくJavaScript入門講座 [ Mana ]

2,794円(税込)【送料込】

楽天ブックス

Mana SBクリエイティブイッサツデスベテミニツクジャバスクリプトニュウモンコウザマナ発行年月：2023年03月02日ページ数：344p サイズ：単行本 ISBN：9784815615758 Mana（マナ）日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア

改訂3版JavaScript本格入門 [ 山田祥寛 ]

3,520円(税込)【送料込】

楽天ブックス

山田祥寛技術評論社カイテイサンハンジャバスクリプトホンカクニュウモンモダンスタイルニヨルキソカラゲンバデノオウヨウマデヤマダヨシヒロ発行年月：2023年02月13日予約締切日：2022年12月14日ページ数：624p サイズ：単行本 ISBN：9784297132880 1　イントロダクション／2　基本的な書き方を身につける

JavaScript 第7版 [ David Flanagan ]

5,060円(税込)【送料込】

楽天ブックス

David Flanagan 村上列オライリー・ジャパンジャバスクリプトダイナナハンデイビッドフラナガンムラカミレツ発行年月：2021年12月02日予約締切日：2021年10月07日ページ数：784p サイズ：単行本 ISBN：9784873119700 原書第7版フラナガン，デイビッド（Flanagan,David）

JavaScript／DavidFlanagan／村上列【3000円以上送料無料

5,060円(税込)【送料込】

bookfan 1号店楽天市場店

著者DavidFlanagan(著) 村上列(訳)出版社オライリー・ジャパン発売日2021年11月ISBN9784873119700ページ数749PキーワードじやヴあすくりぷとJAVASCRIPT ジヤヴアスクリプトJAVASCRIPT ふらながんでびつど FLAN フラナガンデビツド FLAN9784873119700内容紹介サイ本

スラスラわかるJavaScript 新版 [ 桜庭洋之 ]

2,640円(税込)【送料込】

楽天ブックス

桜庭洋之望月幸太郎翔泳社スラスラワカルジャバスクリプトシンバンサクラバヒロユキモチヅキコウタロウ発行年月：2022年07月13日予約締切日：2022年05月20日ページ数：384p サイズ：単行本 ISBN：9784798173269 桜庭洋之（サクラバヒロユキ）中学生でインターネットに出会いプログラミングにはま