・　サンプルの説明

　同じサイズ（同じアスペクト比であれば可）で連番のファイル名の画像を使うカルーセル型スライドショーギャラリーです。 連番のファイル名とは、0.jpg・1.jpg・2.jpg～ や 12.jpg・13.jpg・14.jpg～ などの、連続する正の整数値として成り立つ数字をファイル名にした画像群です。 例えばファイル名が 700.jpg の画像は使えますが 007.jpg は使えません。 もちろん 2022_10.jpg や Y1953.jpg などの様に文字が入ったファイル名も使えません。 連番の最初の数字は何番でも構いません。 「カスタマイズ」で最初と最後の数字と画像へのパスを設定してください。

　操作ボタンはplay/pauseボタンだけで、モバイルではタップでパソコンではマウスを重ねると出てきます。 左右に見えている画像をクリックすると、その画像が中央になる位置にスクロールします。

　ドラッグやマウスホイール（パソコン）やフリック（スマホやタブレット）でも操作でき、マウスが使える環境ではマウスホイールでも操作できます。 ドラッグ・フリック・マウスホイール操作は「カスタマイズ」で機能の有無を選択できます。

　サムネイルギャラリーは、全サムネイルを中央の画像の幅いっぱい横一列に表示します。 即ち、画像の数が少なければサムネイルは大きくなり、画像の数が多くなるほどサムネイルは小さくなります。 デザインを壊さない程度の数を使用してください。 なお、サムネイルギャラリーがいらない時は、ソース中<!-- ここからサムネイルギャラリー。 --!>から<!-- ここまでサムネイルギャラリー。 --!>までを削除してください。スライドショー部分だけになります。

　小さいデバイスで表示してもアスペクト比を維持して縮小し、レスポンシブデザインに対応しています。

　使用している画像は生成AIのCopilotで作ったものです。

　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。

　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

⇔

・　HEAD内のソース

　スライドショーを貼り付けるページのHEAD内にコピーしてください。

・　BODY内のソース

　スライドショーを貼り付ける場所にコピーし、ご自身の画像データに書き換えてください。 このページの見本は画像へのパスを相対表記で書いているため、このままでは画像が表示されません。

All Rights Reserved. Copyright (C) 2002- Miyake_kobo.