※当サイトにはプロモーションが含まれています。
クライアント 自社の商品を紹介するのに縦のスライダーを作ってくれ
にゃテック おけまるだにゃ
今回、紹介するサムネイルが縦に並んだスライダーは、製品ギャラリーやポートフォリオサイト、不動産サイトなどに使えるのではないかと思います。
動作確認は、こちらから可能です。
サムネイルが縦のスライダーを作成してみた
サムネイル画像が縦に並び、それぞれ順番に表示していくスライダーです。
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秒）などにしてください。
