[オープン][S][バナー][レスポンシブ][アクティブ][シャッフル]カルーセル連動スライドショーギャラリーcpSHD_n9hcasg_zdwp_os
- ・ サンプルの説明
-
このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください(「名前を付けて保存」で文字コードを指定するなど)。異なる文字コードが混在すると、文字化けの原因になります。
-
同じサイズ(同じアスペクト比であれば可)の写真を使うスライドショーギャラリーです。
アニメーションはです。
他のアニメーションへのリンクはこのページ最下部にあります。
レスポンシブデザインへの対応は「アスペクト比維持型」です。
スライドショーの操作ボタンは三つ型で、モバイルではタップ、パソコンではマウスを重ねると出てきます。
-
このスライドショーは、スライドショーを表示しているWindowを非アクティブにする(最前面ではなくする・選択を外す・blurにする)と停止し、アクティブに戻す(最前面にする・選択する・focusにする)と再開します。
即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。
スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。
スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。
この機能は「カスタマイズ」でON/OFFを設定できます。
-
このスライドショーは、記述したスライドショーデータをページを開いた時点でシャッフルする事ができます。
即ち、スライドショーがあるページを開くたびに異なる順番で実行できます。
「記述した順番で実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。
-
スライドショー用の写真データは、「ここからスライドショーのデータ。↓」以下のクラス名koboDataのimg要素で書きます。
バナーにする時は、(1)クラス名"koboData"のa要素を使い、写真は背景画像にします。background-sizeの値は"cover"でも"contain"でも構いません。または、(2)写真が横長ならば、クラス名"koboData"のa要素で、クラス名が無くstyle="width:100%;"のimg要素を囲んでください。
間違えてクラス名"koboData"のimg要素を囲むとエラーになります。この見本では(1)(2)両方を使っています。
-
カルーセルサムネイルは、現在選択されているデータのサムネイルが画面の中央に自動的にスクロールします。
スライドショー用の写真を縮小したものを用意してください。もちろん、スライドショー用の写真を流用しても構いませんが、写真の枚数が多いとページが重くなります。
クラス名"gal_base"のdiv要素の中に、スライドショーデータと同じ順番のimg要素で書いてください。
-
このスライドショーギャラリーは、個人・商用を問わず無料で永久に自由に使用できます。
掲載しているソースコードのみで作動し、jQueryなどのライブラリー本体やそのプラグインも、Javascripやcssの外部ファイルも不要です。
アスペクト比維持型 |
|
⇔ |
|
- ・ カルーセル連動スライドショーギャラリー
- レスポンシブデザインへの対応がアスペクト比維持型のため、表示部分を写真(img要素)と同じアスペクト比にする。
すなわち、スタイルシートでpadding-top:~%;に写真の(高さ/幅)を%で書く。
-
使用している画像「破壊される文明と惑星の接近」は生成AIのCopilotで作ったものです。