- ・ サンプルの説明
-
このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください(「名前を付けて保存」で文字コードを指定するなど)。異なる文字コードが混在すると、文字化けの原因になります。
-
写真や文章などをひとまとめにしたBLOCK要素をスライドさせる事ができるスライドショーギャラリーです。
アニメーションはです。
別のアニメーションへのリンクはこのページ最下部にあります。
レスポンシブデザインへの対応は高さ維持型(文章が多い場合はみ出しを防ぐ効果があるが、写真を表示する場合はBLOCK要素の背景として表示する)です。
-
操作ボタンは3個でスライドショー右上に半透明に表示されています。
モバイルではタップ、パソコンではマウスを重ねると不透明になり可視化されます。
アニメーションは左右の矢印ボタンで横方向に動作します。
モバイルでは縦フリックと横フリックでも操作でき、アニメーションはフリックした方向に動作します。
パソコンでは縦ドラッグと横ドラッグでも操作でき、アニメーションはドラッグした方向に動作します。
マウスが使える環境ではマウスホイールで操作でき、アニメーションは縦方向に動作します。
-
このスライドショーは、スライドショーを表示しているWindowを非アクティブにする(最前面ではなくする・選択を外す・blurにする)と停止し、アクティブに戻す(最前面にする・選択する・focusにする)と再開します。
即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。
スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。
スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。
この機能は「カスタマイズ」でON/OFFを設定できます。
-
このスライドショーは、記述したスライドショーデータをページを開いた時点でシャッフルする事ができます。
即ち、スライドショーがあるページを開くたびに異なる順番で実行できます。
「記述した順番で実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。
-
BLOCK要素で写真のみを表示する場合はその背景画像に写真を設定します。
スタイルbackground-size:cover;で画面いっぱいに表示し、あたかも写真のスライドショーの様にする事もできます。また、background-size:contain;にすれば、形の違う写真を一定の枠内に表示できます。
スライドショーデータは「ここからスライドショーのデータ。↓」以下のクラス名koboDataの要素で書いてください。
-
サムネイルもimg要素ではなくdiv要素の背景として表示されます。
クラス名galのDIV要素の中の、クラス名thumbのDIV要素の背景に、サムネイル用の画像を設定してください。
画像の形状やサイズは自由です。
スライドショーの幅に収まるサイズに縮小して表示されます。
即ち、データの数が多ければサムネイルは小さくなり、少なければ大きくなります。
デザインを考えてデータ数を調節してください。
-
このスライドショーは掲載しているソースコードのみで動きます。
jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。
個人・商用を問わず無料で自由に使用できますが、スライドショーを張り付けたページの最下部に著作権表記のリンクが表示されます。
高さ維持型でレスポンシブデザインに対応 |
|
⇔ |
|
- ・ ドラッグ・フリック・マウスホイール連動型divサムネイルスライドショーギャラリー