[オープン][S][バナー][レスポンシブ][アクティブ][シャッフル]ドラッグ・フリック・マウスホイール連動カルーセル連動スライドショーギャラリー
- ・ サンプルの説明
-
このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください(「名前を付けて保存」で文字コードを指定するなど)。異なる文字コードが混在すると、文字化けの原因になります。
-
同じサイズ(同じアスペクト比であれば可)の写真を使うスライドショーギャラリーです。
アニメーションはです。
他のアニメーションへのリンクはこのページ最下部にあります。
レスポンシブデザインへの対応は「アスペクト比維持型」です。
-
スライドショーの切り替えアニメーションはです。
スライドショーの機能はこのままでアニメーションだけを変更する場合は、このページ最下部「別のアニメーションを見る」内のお好みのリンクをクリックしてください。
-
操作ボタンは3個で、モバイルではタップ、パソコンではマウスを重ねると不透明になり可視化されます。
アニメーションは左右の矢印ボタンで横方向に動作します。
モバイルでは縦フリックと横フリックでも操作でき、アニメーションはフリックした方向に動作します。
パソコンでは縦ドラッグと横ドラッグでも操作でき、アニメーションはドラッグした方向に動作します。
マウスが使える環境ではマウスホイールで操作でき、アニメーションは縦方向に動作します。
-
このスライドショーは、スライドショーを表示しているWindowを非アクティブにする(最前面ではなくする・選択を外す・blurにする)と停止し、アクティブに戻す(最前面にする・選択する・focusにする)と再開します。
即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。
スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。
スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。
この機能は「カスタマイズ」でON/OFFを設定できます。
-
このスライドショーは、記述したスライドショーデータをページを開いた時点でシャッフルする事ができます。
即ち、スライドショーがあるページを開くたびに異なる順番で実行できます。
「記述した順番で実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。
-
スライドショーデータは、「ここからスライドショーのデータ。↓」以下のクラス名koboDataのimg要素です。
バナーにする時は、写真を背景画像にしたクラス名"koboData"のa要素を使います。
単純にクラス名koboDataのimg要素をa要素で囲むとエラーになります。
-
カルーセルサムネイルは、現在選択されているデータのサムネイルが画面の中央に自動的にスクロールします。
すべて同じアスペクト比の画像を用意してください。
このページでは横縦比が4:3の画像を使っています。
データは、クラス名"gal_base"のdiv要素の中に、スライドショーデータと同じ順番・同じ数のimg要素で書いてください。
-
このスライドショーは掲載しているソースコードのみで動きます。
jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。
個人・商用を問わず無料で自由に使用できますが、スライドショーを張り付けたページの最下部に著作権表記のリンクが表示されます。
IMG要素アスペクト比維持型 |
|
⇔ |
|
- ・ IMG要素の写真型でアスペクト比維持型
- レスポンシブデザインへの対応がアスペクト比維持型のため、表示部分を写真(img要素)と同じアスペクト比にする。
すなわち、スタイルシートでpadding-top:~%;に写真の(高さ/幅)を%で書く。
-
使用している画像「破壊される文明と惑星の接近」は生成AIのCopilotで作ったものです。