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

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

(() => {
	'use strict';
	class SwitchImage {
		//parameter
		#stageElement1			= null;
		#stageElement2			= null;
		#thumbBackElement		= null;
		#thumbForeElement		= null;
		#prevElement			= null;
		#nextElement			= null;
		#images					= [];
		#imageCount				= 0;
		//constant
		#imageChangeInterval	= 4000;	//画像と画像の時間間隔
		#fadeTime				= 200;
		//variable
		#loopTimeoutId			= null;
		#isBusy					= false;
		#imagePointer			= 0;
		#resizeTimer			= null;
		#thumbCount				= 0;
		#thumbSlideDirection	= 1;
		//variable
		#swipeShreshold			= 50;		//スワイプ判定幅
		#swipeStartX			= 0;		//スワイプ開始位置
		#swipeStartY			= 0;		//スワイプ開始位置
		#isSwiping				= false;	//スワイプ中
		//
		constructor(param) {
			this.#stageElement1 = param.stageElement1;
			this.#stageElement2 = param.stageElement2;
			this.#thumbBackElement = param.thumbBackElement;
			this.#thumbForeElement = param.thumbForeElement;
			this.#prevElement = param.prevElement;
			this.#nextElement = param.nextElement;
			this.#imageCount = param.images.length;
			this.#images = [...param.images];
			this.#images.push(...param.images);
			while (this.#images.length <= 11) {	//6+5より大きく
				this.#images.push(...param.images);
			}
			this.#init();
		}
		#init() {
			this.#onResize();
			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.#thumbSlideDirection = -1;
				this.#slideAction(num);
			});
			this.#nextElement.addEventListener('click',() => {
				const num = this.#withinRange(this.#imagePointer + 1);
				this.#thumbSlideDirection = 1;
				this.#slideAction(num);
			});
			window.addEventListener('resize', () => { this.#onResize(); });
		}
		#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.#thumbSlideDirection = 1;
				this.#slideAction(this.#withinRange(this.#imagePointer + 1));
			} else if (this.#swipeStartX - positionX < -this.#swipeShreshold) {
				this.#thumbSlideDirection = -1;
				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.#setThumbs();
			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.#thumbSlideDirection = 0;
							this.#isBusy = false;
						});
					};
				});
			};
		}
		#autoSlide() {
			this.#loopTimeoutId = setTimeout(() => {
				this.#thumbSlideDirection = 1;
				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.#imageCount - 1;
			return num % this.#imageCount;
		}
		#setThumbs() {
			if (this.#thumbSlideDirection != 0) {
				this.#thumbBackElement.innerHTML = this.#thumbForeElement.innerHTML;
				this.#thumbForeElement.style.opacity = 0;
			}
			//
			this.#thumbForeElement.innerHTML = '';
			const thumbEnd = Math.min(this.#imagePointer + this.#thumbCount,this.#imageCount);
			for (let index = this.#imagePointer; index < thumbEnd; index++) {
				const figure = document.createElement('figure');
				const img = new Image();
				img.setAttribute('draggable','false');
				img.src = this.#images[index];
				figure.appendChild(img);
				figure.addEventListener('click',() => {
					if (this.#isBusy) {
						return;
					}
					this.#slideAction(index);
				});
				this.#thumbForeElement.appendChild(figure);
			}
			//this.#thumbCountより少ない場合に追加表示
			for (let index = thumbEnd; index < thumbEnd + this.#thumbCount - (thumbEnd - this.#imagePointer); index++) {
				const figure = document.createElement('figure');
				const img = new Image();
				img.setAttribute('draggable','false');
				img.src = this.#images[index];
				figure.appendChild(img);
				figure.addEventListener('click',() => {
					if (this.#isBusy) {
						return;
					}
					this.#slideAction(index);
				});
				this.#thumbForeElement.appendChild(figure);
			}
			//
			if (this.#thumbSlideDirection == 1) {
				this.#thumbBackElement.animate(
					[
						{opacity: 1,transform: 'translateX(0px)'},
						{opacity: 0,transform: 'translateX(-160px)'},
					],
					{duration: 400, fill: 'forwards', easing: 'ease-out'}
				);
				this.#thumbForeElement.animate(
					[
						{opacity: 0,transform: 'translateX(160px)'},
						{opacity: 1,transform: 'translateX(0px)'},
					],
					{duration: 400, fill: 'forwards', easing: 'ease-out'}
				);
				this.#thumbForeElement.style.opacity = 0;
			} else if (this.#thumbSlideDirection == -1) {
				this.#thumbBackElement.animate(
					[
						{opacity: 1,transform: 'translateX(0px)'},
						{opacity: 0,transform: 'translateX(160px)'},
					],
					{duration: 400, fill: 'forwards', easing: 'ease-out'}
				);
				this.#thumbForeElement.animate(
					[
						{opacity: 0,transform: 'translateX(-160px)'},
						{opacity: 1,transform: 'translateX(0px)'},
					],
					{duration: 400, fill: 'forwards', easing: 'ease-out'}
				);
				this.#thumbForeElement.style.opacity = 0;
			}
		}
		#onResize() {
			clearTimeout(this.#resizeTimer);
			this.#resizeTimer = setTimeout(() => {
				this.#thumbCount = 6;
				if (window.matchMedia('(width < 1220px)').matches) {
					this.#thumbCount = 5;
					if (window.matchMedia('(width < 1030px)').matches) {
						this.#thumbCount = 4;
						if (window.matchMedia('(width < 840px)').matches) {
							this.#thumbCount = 3;
							if (window.matchMedia('(width < 660px)').matches) {
								this.#thumbCount = 2;
								if (window.matchMedia('(width < 490px)').matches) {
									this.#thumbCount = 1;
								}
							}
						}
					}
				}
				this.#setThumbs();
			},100);
		}
	}
	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)'),
		thumbBackElement: document.querySelector('section.switchimage > div > div.thumb > div > div:nth-of-type(1)'),
		thumbForeElement: document.querySelector('section.switchimage > div > div.thumb > div > div:nth-of-type(2)'),
		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',
		],
	});
})();