- ・ サンプルの説明
-
このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください(「名前を付けて保存」で文字コードを指定するなど)。異なる文字コードが混在すると、文字化けの原因になります。
-
写真や文章などをひとまとめにしたBLOCK要素をスライドさせる事ができる手動スライドショーです。
自動スライドショー機能はありません。
アニメーションはです。
他のアニメーションへのリンクはこのページ最下部にあります。
レスポンシブデザインへの対応は高さ維持型(文章が多い場合はみ出しを防ぐ効果があるが、写真を表示する場合はBLOCK要素の背景として表示する)です。
-
BLOCK要素で写真のみを表示する場合はその背景画像に写真を設定します。
スタイルbackground-size:cover;で画面いっぱいに表示し、あたかも写真のスライドショーの様にする事もできます。また、background-size:contain;にすれば、形の違う写真を一定の枠内に表示できます。
-
スライドショーデータは「ここからスライドショーのデータ。↓」以下のクラス名koboDataの要素で書きます。
-
操作ボタンは2個でスライドショー右下に半透明に表示されています。
モバイルではタップ、パソコンではマウスを重ねると不透明になります。
アニメーションは左右ボタンで横方向に動作します。
モバイルでは縦フリックと横フリックでも操作でき、アニメーションはフリックした方向に動作します。
パソコンではフリックの代わりにマウスホイールで操作でき、アニメーションは縦方向に動作します。
-
このスライドショーは掲載しているソースコードのみで動きます。
jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。
個人・商用を問わず無料で自由に使用できます。
アスペクト比維持型 |
|
⇔ |
|
- ・ 3ボタン横型スライドショー
- 表示部分のスタイルシートでpadding-top:~%;に写真の(高さ/幅)を%で書いてください。このサンプルは(3/4)の横長の写真を使っているため75%です。
以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。
可能ならば、スタイルシート部分はHEAD内に移動してください。
- ・ 別のアニメーションを見る
- 前進と後進で動作方向が反転するもの。
縦横スクロール
縦横視差スクロール
縦横入れ替わり
縦横転がり
縦横3D回転
縦横3D裏返し
縦横3D入れ替わり
縦横3D逆入れ替わり
縦横CUBE回転
縦横CUBE枠内回転
縦横コーナー回転
All Rights Reserved. Copyright (C) 2002- Miyake_kobo.