・　サンプルの説明

　同じサイズ（同じアスペクト比であれば可）の画像を使う全スクロール型スライドショーです。 全スクロール型とは、例えば横に長い板の上に画像を一列に並べて板ごと動かす様な動作です。 スライドショー用の画像はクラス名"base"のdiv要素の中に、クラス名"koboData"のimg要素で記述してください。 バナーにする時はclass="koboData"のa要素を使い画像は背景にしてください。

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

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

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

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

　サムネイルの画像データはクラス名"gal_base"のdiv要素の中のimg要素です。通常はスライドショー用の画像の縮小版を使いますが別の画像でも構いません。すべて同じアスペクト比の画像を用意してください。スライドショーデータとサムネイルデータは、同じ順番で同じ数を記述してください。

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

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

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

アスペクト比維持型
	⇔

・　HEAD内のソース

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

・　BODY内のソース

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

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