・　サンプルの説明

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

　操作ボタンはplay/pauseボタンだけで、モバイルではタップでパソコンではマウスを重ねると出てきます。 小さいデバイスで表示してもアスペクト比を維持して縮小し、レスポンシブデザインに対応しています。

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

　当サイトでは、本来の意味とは多少違いますが、スマホやタブレットの指操作で引きずる事ができるタイプを「スワイプ」できないタイプを「フリック」と呼んで区別しています。 パソコンでの「ドラッグ」操作もそれぞれ同じ動きをします。 即ち、このスライドショー（スワイプ・ドラッグ型）では、指やマウスを離さずに左右両方に移動させれば写真も連動し、離した位置で動きが決まります。スタート位置から一定距離（「カスタマイズ」で設定可能）以上左で離せば次の写真、右で離せば前の写真にスクロールします。 因みに、フリック・ドラッグ型は、左右の何れかに一定距離を動かした途端に、指やマウスを離さなくても、アニメーションが開始されます。 当サイトでは、このフリック・ドラッグ型を使用したサンプルの方が多数です。

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

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

　このページでは生成AIを使って作った画像を使っています。

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

アスペクト比維持型
	⇔

・　HEAD内のソース

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

・　BODY内のソース

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

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