[自動作成][連番][レスポンシブ]縦横ドラッグ・フリック連動1ボタン型統合スライドショー cpSR_acxydfsl_1b_zdw_os


・　サンプルの説明
　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。
　連番数字のファイル名の写真を使う縦横ドラッグ・フリック連動スライドショーで、すべてをスクリプトが自動製作します。 スタイルシートやHTMLの記述は必要ありません。 その代わり（スクリプトを書き換えない限り）写真表示部分やボタンのデザインを変更する事はできません。
　スライドショーの切り替えアニメーションはです。 同じスライドショーでアニメーションだけの変更は、このページ最下部「別のアニメーションを見る」内のリンクをクリックしてください。
　連番とは0.jpg・1.jpg・2.jpg・・・の様にファイル名が数値で順番になっているファイル群です。 数値（実際の量を表す）ですから007.jpgは使えませんが1007.jpgは使えます。 9.jpgの次は10.jpgです。 スクリプト内の「設定部分」で連番の最初と最後と写真へのパスなどを設定してください。
　スライドショーは、パソコンでは縦横ドラッグで操作し、アニメーションはドラッグした方向に動作します。 モバイルでは縦横フリックで操作し、アニメーションはフリックした方向に動作します。 スライドショー動作中に訪問者が操作をした場合（興味を示したと判断して）スライドショーは停止し、写真部分の右上に「start」ボタンが現れます。クリックでスライドショーが再開し、ボタンは消えます。
　サムネイルギャラリーは、全サムネイルをスライドショー幅いっぱい横一列に表示します。 即ち、写真の数が少なければサムネイルは大きくなり、写真の数が多くなるほどサムネイルは小さくなります。 デザインを壊さない程度の数を使用してください。
　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。
　この見本で使用している画像「砂漠に染井吉野が咲く異世界」は生成AIのCopilotで作ったものです。

アスペクト比維持型
⇔


・　スライドショー




　以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。 見本の写真は、パソコンでの編集では表示されますが、Web上にアップすると表示されない事があります。





・　別のアニメーションを見る
アニメーションがドラッグ・フリック操作で縦横連動するもの。
　 縦横スクロール 　 縦横視差スクロール 　 縦横入れ替わり 　 縦横転がり 　 縦横3D回転 　 縦横3D裏返し 　 縦横3D入れ替わり 　 縦横3D逆入れ替わり 　 縦横CUBE回転 　 縦横CUBE枠内回転 　 縦横コーナー回転 　 縦横連動ランダムズーム3D回転1 　 縦横連動ランダムズーム3D回転2


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

ランダムな方向に動作するもの、または方向性がないもの。
　 落下 　 brightness 　 ランダムclip-circle 　 ランダムズーム 　 フラッシュ 　 ランダム回転入れ替わり 　 ランダム2D回転 　 rAF型弾性移動 　 rAF型びろ～ん

ズーム3Dアニメーションを使ったもの。
　 ランダム縦横ズーム3D回転1 　 ランダム縦横ズーム3D回転2 　 3D横ズーム裏返し 　 3D縦ズーム裏返し 　 3D横ズーム入れ替わり 　 3D縦ズーム入れ替わり 　 3D横ズーム逆入れ替わり 　 3D縦ズーム逆入れ替わり 　 CUBE横ズーム回転 　 CUBE縦ズーム回転 　 3D横ズームスクロール 　 3D縦ズームスクロール 　

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




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