[自動作成][連番][レスポンシブ]縦横ドラッグ・フリック連動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で作ったものです。
アスペクト比維持型 |
|
⇔ |
|
- ・ スライドショー