・　サンプルの説明

　同じサイズ（同じアスペクト比であれば可）の画像を使うカルーセル型スライドショーです。 スライドショー用の画像はクラス名"base"のdiv要素の中に、クラス名"koboData"のimg要素で記述してください。

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

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

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

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

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

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

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

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

⇔

・　HEAD内のソース

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

・　BODY内のソース

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

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