スライドショー

<!--▼▼▼▼▼ここから「スライドショー」-->
<aside id="mainimg">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</aside>
<!--▲▲▲▲▲ここまで「スライドショー」-->

tp_lp3のメイン画像の種類について

フォルダ名の末尾が「_movie3」となっているタイプは3枚の動画で構成された動画スライドショーです。枚数変更可能。
フォルダ名の末尾が「_movie1」となっているタイプは1枚の動画のみが表示されるタイプ。
ファイル名の末尾が「_slide」となっているタイプは3枚の写真で構成されたスライドショーです。枚数変更可能。

別のテーマに搭載されているメイン画像を使いたい場合は

例えば、1枚の動画のみのテンプレはtp_lp3_biz_movie1のみですが、このメイン画像を他のタイプに使いたい場合などの説明です。

使いたいメイン画像のフォルダに入っているcss/mainimg.cssと、js/main.jsを上書きし、該当箇所のhtmlコードをコピペすれば使えます。
素材そのものも必要なので、「とりあえず動作確認だけ」という場合は素材もテンプレから移動して下さい。

設定は

cssフォルダの「mainimg.css」と、jsフォルダのmain.js内の「スライドショー」にあります。

1枚あたりのスライドの表示時間は

main.jsの「スライドショー」内にある、
}, 4000); // 4秒ごとにスライドを切り替える
の4000の数字で変更できます。

画面いっぱいの範囲でトリミングされます

切り抜かれてもおかしくない画像を使って下さい。

画面が横長の場合と縦長の場合で変更できます

css/mainimg.cssでそれぞれ指定しています。詳しい説明もコメントで入っているので読んで下さい。
もし縦も横も同じ画像でいい場合は、mainimg.cssに書いてあるファイル名を揃えておけばOKです。

フリー写真も配布中です

以下からお好きな画像をDLして入れ替えて頂いてもOKです。
このテンプレートの配布時点ではまだ数は少ないのですが、今後どんどん追加予定です。
>> 無料の写真素材