[オープン][F][連番][タイル][レスポンシブ][アクティブ][シャッフル][divサムネイル]ガイド付きカルーセル連動DrFlMw縦横連動スライドショーギャラリー

・　サンプルの説明
　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。
　ファイル名が連番数字でサイズやアスペクト比がバラバラの画像を使うタイル分割スライドショーギャラリーです。 連番の最初は何番でも構いません。 レスポンシブデザインへの対応は表示部分のアスペクト比維持型です。
　タイル型に分割された画像の部品がランダムな順番で時差動作します。 分割数は、理論的には2x2=4個以上ならば幾つでも「カスタマイズ」で設定できますが、数が多くなると起動や動作が遅くなるので程々に設定してください。 小さいデバイスや古いデバイスで開いている訪問者に配慮してください。 因みに、このページの見本は4x5=20個に設定しています。
　スライドショーの画像表示部分をクリックすると別のタブに画像だけが表示されます。 この機能は「カスタマイズ」で有無を選択できます。
　スライドショーの切り替えアニメーションはです。 スライドショーの機能はこのままでアニメーションだけを変更する場合は、このページ最下部「別のアニメーションを見る」内のお好みのリンクをクリックしてください。
　ドラッグ（パソコン）やフリック（スマホやタブレット）でも操作でき、縦横連動型のアニメーションでは縦横それぞれの操作でアニメーション方向も連動します。 即ちアニメーションは、モバイルでは縦フリックと横フリック操作でフリックした方向に動作し、パソコンでは縦ドラッグと横ドラッグでドラッグした方向に動作します。 マウスが使える環境ではマウスホイールでも操作でき、アニメーションは縦方向に動作します。
　ドラッグ・フリック・マウスホイール操作は「カスタマイズ」で機能の有無を選択できます。
　操作ボタンは3個でスライドショーの右上部に半透明に表示されています。 モバイルではボタンをタップ、パソコンではスライドショーにマウスを重ねると不透明になり可視化されます。
　ガイドボタンで操作する事もできます。ガイドボタンはクラス名guideのdiv要素を作っておけばスクリプトが自動的に設置します。 不要な場合はクラス名guideのdiv要素を削除してください。
　このスライドショーは、スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択を外す・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。 即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。 スライドショーの画像をクリックして、別のタブに画像のみを開いた時も一時停止します。 スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。 この機能は「カスタマイズ」でON／OFFを設定できます。
　このスライドショーは、連番をページを開いた時点でシャッフルする事ができます。 即ち、スライドショーがあるページを開くたびに異なる順番で実行できます。 「連番の順に実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。
　サムネイルは同じ連番の画像を使って自動的に作成されます。 サムネイルギャラリーは、現在選択されているデータのサムネイルが画面の中央に自動的にスクロールするカルーセル型です。
　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。 なお、使用している画像は生成AIのGeminiで作ったものです。

アスペクト比維持型
⇔


・　ガイド付きカルーセル連動DrFlMw縦横連動スライドショーギャラリー
　カスタマイズで自動スタートとアクティブとシャッフルとドラッグ・フリック・マウスホイールとクリックで別タブに画像を表示する機能をONにしてあります。



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





・　同型のスライドショーでアニメーションがドラッグ・フリック・マウスホイールに縦横連動するもの。
　 縦横スクロール 　 縦横視差スクロール 　 縦横透かしスクロール 　 縦横視差透かしスクロール 　 縦横入れ替わり 　 縦横転がり 　 縦横3D回転 　 縦横3D裏返し 　 縦横3D入れ替わり 　 縦横3D逆入れ替わり 　


・　同型のスライドショーでアニメーションがドラッグ・フリック・マウスホイールに連動しないもの。
前進と後進で動作方向が反転するもの。
　 スクロール横 　 スクロール縦 　 視差スクロール横 　 視差スクロール縦 　 透かしスクロール横 　 透かしスクロール縦 　 視差透かしスクロール横 　 視差透かしスクロール縦 　 Z方向スクロール 　 縦スウィング 　 縦ズームスウィング 　 ランダム縦横スクロール 　 ランダム方向移動 　 ランダム方向視差移動 　 ランダムタイミング移動 　 横転がり 　 縦転がり 　 横入れ替わり 　 縦入れ替わり 　 アップダウン 　 ダウンアップ 　 ダウンジャンプ 　 ランダムアップダウン 　 せり出し 　 ランダム回転移動インアウト 　 ドア横回転 　 ドア縦回転 　 横3D回転 　 縦3D回転 　 円ワイプ 　 rAF型弾性二段階ズーム 　 rAF型バウンスズーム 　 rAF型弾性ズーム 　 rAF型ランダム回転ズーム

ランダムな方向に動作するもの、または方向性がないもの。
　 フェード 　 ランダム透かし移動インアウト 　 ダウンアップジャンプ 　 落下 　 起き上がり 　 透かし 　 blur 　 brightness 　 ランダムclip-polygon 　 ランダムclip-circle 　 ランダムズーム 　 ショットズーム回転 　 フラッシュ 　 ランダムワイプ 　 ランダム回転入れ替わり 　 ランダム2D回転 　 rAF型弾性移動 　 rAF型びろ～ん 　 rAF型ランダム弾性移動 　

ズーム3Dアニメーションを使ったもの。
　 3D横ズーム裏返し 　 3D縦ズーム裏返し 　 ランダム3D縦横ズーム裏返し 　 ランダムタイミング3Dズーム裏返し 　 3D横ズーム入れ替わり 　 3D縦ズーム入れ替わり 　 ランダム3D縦横ズーム入れ替わり 　 3D横ズーム逆入れ替わり 　 3D縦ズーム逆入れ替わり 　 ランダム3D縦横ズーム逆入れ替わり 　

シャトル型。アニメーションの動作方向が、next・prevに関係なく、左右や上下や前後を繰り返す。
　 前後シャトル型zスクロール 　 左右シャトル型スクロール 　 上下シャトル型スクロール 　 左右シャトル型視差移動 　 上下シャトル型視差移動 　 左右シャトル型透かしスクロール 　 上下シャトル型透かしスクロール 　 左右シャトル型透かし視差移動 　 上下シャトル型透かし視差移動 　 前後シャトル型せり出し 　 左右シャトル型転がり 　 上下シャトル型転がり 　 左右シャトル型枠内CUBE回転 　 上下シャトル型枠内CUBE回転 　 左右シャトル型ズームCUBE回転 　 上下シャトル型ズームCUBE回転 　 左右シャトル型3D入れ替わり 　 上下シャトル型3D入れ替わり 　 左右シャトル型3D逆入れ替わり 　 上下シャトル型3D逆入れ替わり 　 左右シャトル型3D裏返し 　 上下シャトル型3D裏返し 　 左右シャトル型ドア回転 　 上下シャトル型ドア回転




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