トップ>
無料テンプレート>
73の編集方法

無料テンプレート73のスライドショー

スライドショーについて

写真の枚数は、2枚以上で自由に設定できます。

index.html の 70行目～
<ul>
<li><img src="images/cat-free-photo.jpg"></li>
<li><img src="images/cat-free-photo5.jpg"></li>
<li><img src="images/cat-free-photo6.jpg"></li>
</ul

初期設定では、3枚の写真が設定されています。

<li> タグを増やせば、4枚以上の写真も設定できます。

写真のサイズや縦横比も自由です。

初期設定では、幅 2000px 高さ 1000px の写真が配置されています。

写真のサイズは自由ですが、各写真は同じサイズにしてください。

ブラウザの幅を狭めて確認すると、各デバイスでの表示がイメージできると思います。（レスポンシブ Web デザイン対応のスライドショーです）

スライドショーのコントローラー

上の画像のように、スライドショーにはコントローラーがあります。

いずれかのボタンをクリック（タップ）すると、スライドショーは一時停止します。

一時停止することで、写真をゆっくりと見ることができます。

一時停止すると、一時停止ボタンが再生ボタンに切り替わります。

再生ボタンをクリックすると、スライドショーが再開します。

写真の枚数を示す丸ボタンは、枚数分が自動的に追加されます。

丸ボタンをクリックすると、該当する写真が表示されます。

スライドショーのスピードは、script.js で変更できます。

script.js の 5行目～ 9行目
// スライドショーのスピードを変更
var first_photo = 2000; // 最初の写真を何秒かけて表示するか（1000 = 1秒）
var change_photo = 2000; // 写真を何秒かけて切り替えるか
var slide_time = 5000; // 何秒ごとに写真の切り替えを実行するか（first_photo と change_photo より長く設定）
var change_photo_click = 800; // 写真を何秒かけて切り替えるか（進む・戻るボタンなどクリックによる切り替え）

赤字の値を変更すると、スライドショーのスピードを調整できます。