画像切り替えサムネイル付き カルーセル 画像6枚

/**
 * 画像切り替え
 *
 * @author ao-system, Inc.
 * @date 2025-03-14
 */

(() => {
	'use strict';
	class SwitchImage {
		//parameter
		#stageElement1			= null;
		#stageElement2			= null;
		#thumbElement			= null;
		#prevElement			= null;
		#nextElement			= null;
		#images					= [];
		//constant
		#imageChangeInterval	= 4000;	//画像と画像の時間間隔
		#fadeTime				= 200;
		//variable
		#loopTimeoutId			= null;
		#isBusy					= false;
		#imagePointer			= 0;		//_switchImageのポインタ
		#swipeShreshold			= 50;		//スワイプ判定幅
		#swipeStartX			= 0;		//スワイプ開始位置
		#swipeStartY			= 0;		//スワイプ開始位置
		#isSwiping				= false;	//スワイプ中
		//
		constructor(param) {
			this.#stageElement1 = param.stageElement1;
			this.#stageElement2 = param.stageElement2;
			this.#thumbElement = param.thumbElement;
			this.#prevElement = param.prevElement;
			this.#nextElement = param.nextElement;
			this.#images = param.images;
			this.#init();
		}
		#init() {
			this.#initThumbs();
			this.#stageElement1.src = this.#images[0];
			this.#stageElement2.src = this.#images[0];
			this.#initSwipe();
			this.#autoSlide();
			this.#setListener();
		}
		#setListener() {
			this.#prevElement.addEventListener('click',() => {
				const num = this.#withinRange(this.#imagePointer - 1);
				this.#slideAction(num);
			});
			this.#nextElement.addEventListener('click',() => {
				const num = this.#withinRange(this.#imagePointer + 1);
				this.#slideAction(num);
			});
		}
		#initSwipe() {
			this.#stageElement2.addEventListener('click', (e) => { e.preventDefault();});
			this.#stageElement2.addEventListener('mousedown', (e) => { this.#swipeStart(e.clientX,e.clientY); });
			this.#stageElement2.addEventListener('mouseup', (e) => { this.#swipeEnd(e.target, e.clientX, e.clientY); });
			this.#stageElement2.addEventListener('touchstart', (e) => { this.#swipeStart(e.touches[0].clientX, e.touches[0].clientY); });
			this.#stageElement2.addEventListener('touchend', (e) => { this.#swipeEnd(e.target, e.changedTouches[0].clientX, e.changedTouches[0].clientY); });
		}
		#swipeStart(positionX,positionY) {
			if (this.#isBusy) {
				return;
			}
			this.#swipeStartX = positionX;
			this.#swipeStartY = positionY;
			this.#stageElement2.style.cursor = 'grabbing';
			this.#isSwiping = true;
		}
		#swipeEnd(targetElm,positionX,positionY) {
			if (this.#isSwiping == false) {
				return;
			}
			if (this.#swipeStartX - positionX > this.#swipeShreshold) {
				this.#slideAction(this.#withinRange(this.#imagePointer + 1));
			} else if (this.#swipeStartX - positionX < -this.#swipeShreshold) {
				this.#slideAction(this.#withinRange(this.#imagePointer - 1));
			} else if (this.#swipeStartY - positionY > this.#swipeShreshold) {
				//何もしない
			} else if (this.#swipeStartY - positionY < -this.#swipeShreshold) {
				//何もしない
			} else {
			}
			this.#stageElement2.style.cursor = '';
			this.#isSwiping = false;
		}
		#slideForward() {
			if (this.#isBusy) {
				return;
			}
			this.#isBusy = true;
			this.#stageElement1.src = this.#images[this.#imagePointer];
			this.#stageElement1.onload = () => {
				this.#stageElement2.animate(
					[
						{opacity: 0},
					],
					{delay: 0, duration: this.#fadeTime, fill: 'forwards'}
				).finished.then(() => {
					this.#stageElement2.src = this.#images[this.#imagePointer];
					this.#stageElement2.onload = () => {
						this.#stageElement2.animate(
							[
								{opacity: 0},
								{opacity: 1},
							],
							{delay: 0, duration: this.#fadeTime, fill: 'forwards'}
						).finished.then(() => {
							this.#isBusy = false;
						});
					};
				});
			};
		}
		#autoSlide() {
			this.#loopTimeoutId = setTimeout(() => {
				this.#slideAction();
			}, this.#imageChangeInterval - this.#fadeTime);
		}
		#slideAction(num = this.#imagePointer + 1) {
			clearTimeout(this.#loopTimeoutId);
			this.#imagePointer = this.#withinRange(num);
			this.#slideForward();
			this.#autoSlide();
		}
		#withinRange(nextNumber) {
			const num = (nextNumber >= 0) ? nextNumber : this.#images.length - 1;
			return num % this.#images.length;
		}
		#initThumbs() {
			for (let i = 0; i < this.#images.length; i++) {
				const figure = document.createElement('figure');
				const img = new Image();
				img.setAttribute('draggable','false');
				img.src = this.#images[i];
				figure.appendChild(img);
				figure.addEventListener('click',() => {
					if (this.#isBusy) {
						return;
					}
					this.#slideAction(i);
				});
				this.#thumbElement.appendChild(figure);
			}
		}
	}
	new SwitchImage({
		stageElement1: document.querySelector('section.switchimage > div > div.stage > img:nth-of-type(1)'),
		stageElement2: document.querySelector('section.switchimage > div > div.stage > img:nth-of-type(2)'),
		thumbElement: document.querySelector('section.switchimage > div > div.thumb > div'),
		prevElement: document.querySelector('section.switchimage > div > div.thumb > figure:nth-of-type(1) > img'),
		nextElement: document.querySelector('section.switchimage > div > div.thumb > figure:nth-of-type(2) > img'),
		images: [
			'./image/panel01.webp',
			'./image/panel02.webp',
			'./image/panel03.webp',
			'./image/panel04.webp',
			'./image/panel05.webp',
			'./image/panel06.webp',
		],
	});
})();