画像切り替えサムネイル付き switcher スイッチャー swiper スワイパーサムネイルは折り返し

マウスやタッチによる左右スワイプでの画像切り替え可能。
右下のボタンによる画像切り替え、および、時間経過による画像自動切り替え。
レスポンシブ対応。画像個別に内部リンク外部リンクを設置可能。このサンプルにはリンクは設置されていません。

現時点のコードは以下の通り:

/**
 * 画像切り替え
 *
 * @author ao-system, Inc.
 * @date 2024-04-09
 *

<section class="switchpanel">
	<div>
		<div id="switchPanelStage"></div>
		<div id="switchPanelThumbnail"></div>
	</div>
</section>

<style>
section.switchpanel {
	> div {
		max-width: 1920px;
		margin: 0 auto;
		overflow: hidden;
		> #switchPanelStage {
			user-select: none;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 1fr;
			> div {
				grid-row: 1/2;
				grid-column: 1/2;
				&:nth-of-type(1) {
					z-index: 0;
				}
				&:nth-of-type(2) {
					z-index: 1;
					transition: 0.5s;
					cursor: ew-resize;
				}
				> picture {
					> img {
						width: 100%;
						display: block;
					}
				}
			}
		}
		> #switchPanelThumbnail {
			padding: 4px 0;
			display: grid;
			grid-template-columns: repeat(6,1fr);
			gap: 4px;
			@media (width < 530px) {
				grid-template-columns: repeat(5,1fr);
			}
			@media (width < 430px) {
				grid-template-columns: repeat(4,1fr);
			}
			@media (width < 330px) {
				grid-template-columns: repeat(3,1fr);
			}
			> div {
				border: solid 1px #999;
				&.on {
					border-color: #f00;
				}
				> picture {
					> img {
						width: 100%;
						display: block;
					}
				}
			}
		}
	}
}
</style>
 *
 */

(() => {
	'use strict';
	class SwitchImage {
		#constProperties = [
			{prop: 'stage',					value: document.getElementById('switchPanelStage')},
			{prop: 'switchPanelThumbnail',	value: document.getElementById('switchPanelThumbnail')},
			{prop: 'layer0',				value: document.createElement('div')},
			{prop: 'layer1',				value: document.createElement('div')},
			{prop: 'imageChangeInterval',	value: 4000},	//画像と画像の時間間隔
			{prop: 'slideWidth',			value: 50},		//切り替わるスライド幅
			{prop: 'slideTime',				value: 600},	//スライド時間cssの0.5sよりちょっと長め
			{prop: 'swipeShreshold',		value: 50},		//スワイプ判定幅
		];
		#loopTimeoutId	= null;		//自動スライドのタイマー
		#isBusy			= false;	//動作中
		#pausePlayFlag	= true;		//falseで停止
		#focusFlag		= true;		//フォーカスが外れている時は動作させないため
		#valueIndex		= 0;		//this.#valuesの添え字
		#slideDirection	= 1;		//1|-1	正方向,逆方向
		#swipeStartX	= 0;		//スワイプ開始位置
		#isSwiping		= false;	//スワイプ中
		#values			= [];
		//
		constructor(values) {
			this.#values = values;
			this.#constProperties.forEach((obj) => Object.defineProperty(this, obj.prop, {value:obj.value, writable:false}));
			this.#init();
		}
		#init() {
			//this.#switchImage = shuffle(this.#switchImage);	//シャッフルさせる場合
			//window.addEventListener('focus',() => { this.#focusFlag = true;});	//out focusで停止させる場合の処理
			//window.addEventListener('blur',() => { this.#focusFlag = false;});	//out focusで停止させる場合の処理
			//
			this.stage.appendChild(this.layer0);
			this.stage.appendChild(this.layer1);
			this.layer0.innerHTML = this.#values[0].html;
			this.layer1.innerHTML = this.#values[0].html;
			this.layer1.animate(
				[{opacity: 0}],
				{delay:0,duration:1, easing:'linear',fill:'forwards', },
			);
			this.#initThumbnail();
			this.#initSwipe();
			this.#thumbnailOn();
			this.#autoSlide();
		}
		#shuffle(array) {
			for (let i = array.length - 1; i > 0; i--) {
				const j = Math.floor(Math.random() * (i + 1));
				[array[i], array[j]] = [array[j], array[i]];
			}
			return array;
		}
		#initThumbnail() {
			this.#values.map((x,index) => {
				const div = document.createElement('div');
				div.addEventListener('click',() => {
					if (this.#isBusy) {
						return;
					}
					this.#slideAction(index);
				});
				div.innerHTML = x.thumbnail;
				this.switchPanelThumbnail.appendChild(div);
			});
		}
		#initSwipe() {
			this.layer1.addEventListener('click', (e) => { e.preventDefault();});
			this.layer1.addEventListener('mousedown', (e) => { this.#swipeStart(e.clientX); });
			this.layer1.addEventListener('mouseup', (e) => { this.#swipeEnd(e.clientX); });
			this.layer1.addEventListener('touchstart', (e) => { this.#swipeStart(e.touches[0].clientX); });
			this.layer1.addEventListener('touchend', (e) => { this.#swipeEnd(e.changedTouches[0].clientX); });
		}
		#swipeStart(positionX) {
			if (this.#isBusy) {
				return;
			}
			this.#swipeStartX = positionX;
			this.layer1.style.cursor = 'grabbing';
			this.#isSwiping = true;
		}
		#swipeEnd(positionX) {
			if (this.#isSwiping == false) {
				return;
			}
			if (this.#swipeStartX - positionX > this.swipeShreshold) {
				this.#slideAction(this.#withinRange(this.#valueIndex + 1));
			} else if (this.#swipeStartX - positionX < -this.swipeShreshold) {
				this.#slideDirection = -1;
				this.#slideAction(this.#withinRange(this.#valueIndex - 1));
			} else {
				if (this.#values[this.#valueIndex].link) {
					if (this.#values[this.#valueIndex].external) {
						window.open(this.#values[this.#valueIndex].link, '_blank');
					} else {
						window.location.href = this.#values[this.#valueIndex].link;
					}
					return;
				}
			}
			this.layer1.style.cursor = '';
			this.#isSwiping = false;
		}
		#slideForward() {
			if (this.#isBusy) {
				return;
			}
			this.#isBusy = true;
			this.#thumbnailOn();
			this.layer1.innerHTML = this.#values[this.#valueIndex].html;
			this.layer1.animate(
				[
					{opacity: 0, transform: 'translateX(' + (this.slideWidth * this.#slideDirection) + 'px)'},
					{opacity: 1, transform: 'translateX(0px)'},
				],
				{delay:0,duration:this.slideTime, easing:'ease-out',fill:'forwards', },
			);
			setTimeout(() => {
				this.layer0.innerHTML = this.#values[this.#valueIndex].html;
				this.layer1.animate(
					[{opacity: 0}],
					{delay:100,duration:1, easing:'linear',fill:'forwards', },
				);
				this.#slideDirection = 1;
				setTimeout(() => {
					this.#isBusy = false;
				},100);
			},this.slideTime + 100);
		}
		#autoSlide() {
			this.#loopTimeoutId = setTimeout(() => {
				if (this.#pausePlayFlag && this.#focusFlag) {
					this.#slideAction();
				} else {
					this.#autoSlide();
				}
			}, this.imageChangeInterval - this.slideTime);
		}
		#slideAction(num = this.#valueIndex + 1) {
			clearTimeout(this.#loopTimeoutId);
			this.#valueIndex = this.#withinRange(num);
			this.#slideForward();
			this.#autoSlide();
		}
		#thumbnailOn() {
			const divs = this.switchPanelThumbnail.querySelectorAll('div');
			divs.forEach((elm) => elm.classList.remove('on'));
			divs[this.#valueIndex].classList.add('on');
		}
		#withinRange(nextNumber) {
			const num = (nextNumber >= 0) ? nextNumber : this.#values.length - 1;
			return num % this.#values.length;
		}
	}
	//
	new SwitchImage(
		[
			{
				'link': '',
				'external': false,
				'html': '<picture><source srcset="./image/panel01b.webp" media="(width < 700px)"><img src="./image/panel01.webp" draggable="false"></picture>',
				'thumbnail': '<picture><img src="./image/thumb01.webp" draggable="false"></picture>',
			},
			{
				'link': '',
				'external': false,
				'html': '<picture><source srcset="./image/panel02b.webp" media="(width < 700px)"><img src="./image/panel02.webp" draggable="false"></picture>',
				'thumbnail': '<picture><img src="./image/thumb02.webp" draggable="false"></picture>',
			},
			{
				'link': '',
				'external': false,
				'html': '<picture><source srcset="./image/panel03b.webp" media="(width < 700px)"><img src="./image/panel03.webp" draggable="false"></picture>',
				'thumbnail': '<picture><img src="./image/thumb03.webp" draggable="false"></picture>',
			},
			{
				'link': '',
				'external': false,
				'html': '<picture><source srcset="./image/panel04b.webp" media="(width < 700px)"><img src="./image/panel04.webp" draggable="false"></picture>',
				'thumbnail': '<picture><img src="./image/thumb04.webp" draggable="false"></picture>',
			},
			{
				'link': '',
				'external': false,
				'html': '<picture><source srcset="./image/panel05b.webp" media="(width < 700px)"><img src="./image/panel05.webp" draggable="false"></picture>',
				'thumbnail': '<picture><img src="./image/thumb05.webp" draggable="false"></picture>',
			},
			{
				'link': '',
				'external': false,
				'html': '<picture><source srcset="./image/panel06b.webp" media="(width < 700px)"><img src="./image/panel06.webp" draggable="false"></picture>',
				'thumbnail': '<picture><img src="./image/thumb06.webp" draggable="false"></picture>',
			},
		]
	);
})();

動作環境(2024-01-09時点)
・Google Chrome 120
・Microsoft Edge 120
・Mozilla Firefox 122.0b6
・Apple Safari 17.1.2

いつもながらスイッチャー/スワイパーは自作しており、最近はCSSの機能が充実しているのでJavaScriptの記述量は半分程度でスイッチャー/スワイパーが書けるようになった。
この版は極力JavaScriptを使用せずにCSSの記述に重点を置き作成を試みたもので有るが、スワイプ操作等々を含めるとそれなりのJavaScriptコード量になってしまった。ただし実質200行足らずのコンパクト設計である。
この処理を使いたい方はソースコードを参考に自分好みのものに仕上げて欲しい。

スイッチャー/スワイパーはその都度顧客のニーズや状況に合わせて作り変えている。よってライブラリの様に使い易くすることは無いしパラメータ類はコード内に埋め込んでいる。
何らかのライブラリを使うと用途がそのライブラリの制御範囲に限定されてしまう為好きではないし、概ね巨大である。
その都度作る方がコードも最小限で軽量に仕上がるしメンテナンスできる。
ブラウザ互換で困ることも最近は少ない。JavaScriptは使い捨てが原則。

2024年4月初版
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。

画像切り替えサムネイル付き switcher スイッチャー swiper スワイパー

画像切り替え機能の制作例

画像切り替えサムネイル付き switcher スイッチャー swiper スワイパー
サムネイルはスマホサイズでは折り返し

主な用途としてメイン画像用のスイッチャー/スワイパーです。JavaScriptコードを参考に自分好みに仕上げよう。

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

インターネット

IPv4,IPv6

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他