css + jQueryスライドショータイプの解説
デモ
使用タグは以下です
※ご利用のテンプレートによってタグが若干異なるかもしれません。
全て画像を使ったタイプのタグ
<aside id="mainimg">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</aside>
１枚目のみ動画を配置し、その他は画像を使ったタイプのタグ
以下のように、全て画像タイプのコードの中にvideoタグで動画を直接配置しているだけです。
多分、通常のimg要素もこのような使い方でスライドショー化できると思います。その場合は画像の縦横比率を揃えておいて下さい。
<aside id="mainimg">
<div class="slide slide1"><video src="images/movie.mp4" autoplay loop muted playsinline></video></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</aside>
スライドショーの上にテキストやリンクを重ねたタイプのタグ
以下は単純なタグの例ですが、冒頭のデモページでは、h1やp要素を使ってスライドごとにテキストの場所も移動させています。
<aside id="mainimg">
<div class="slide slide1">ここにテキストやリンク</div>
<div class="slide slide2">ここにテキストやリンク</div>
<div class="slide slide3">ここにテキストやリンク</div>
</aside>
４枚目を追加したい場合は
まず、html側に４枚目のコードを記載します。
<aside id="mainimg">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</aside>
次に、slide.cssを開き、３枚目のコードをコピペしたら、.slide3をslide4に書き換えて、画像ファイル名を入れ替えればOK。
.slide4 {
background: url('../images/4.jpg') no-repeat center center / cover;
}
動画の場合はslide.cssへの追加は不要で、htmlのみの追加でOKです。
<div class="slide slide1">〜〜〜</div>
<div class="slide slide2">〜〜〜</div>
<div class="slide slide3">〜〜〜</div>
<div class="slide"><video src="images/movie4.mp4" autoplay loop muted playsinline></video></div>
「slide」と「slide1〜slide3」の違い
div要素全てに共通で入っている「slide（※数字なし）」はjQueryでスライドさせる枚数をカウントする為の名前です。
必ず入れて下さい。
<div class="slide slide1">〜〜〜</div>
<div class="slide slide2">〜〜〜</div>
<div class="slide slide3">〜〜〜</div>
語尾に数字がついている「slide1〜slide3」については、背景画像をslide.cssで指定する為のものです。
こちらは背景画像を使いたい場合に使用します。
<div class="slide slide1">〜〜〜</div>
<div class="slide slide2">〜〜〜</div>
<div class="slide slide3">〜〜〜</div>
動画の場合は直接htmlに書き込みますので、数字がついたslideは不要（※あってもOKです）ですし、slide.cssへの記載も不要です。
<div class="slide"><video src="images/movie4.mp4" autoplay loop muted playsinline></video></div>
スライドショーのスピード調整
１枚あたりの表示時間の変更
js/main.js内にある、スライドショーの設定箇所の「5000」などの数字を変更して下さい。5000は5秒の事で、5秒ごとに画像が切り替わるという意味になります。尚、数字がテンプレにより異なる場合がありますが、数字の横に説明が書いてありますので探して下さい。
フェード（切り替わる際のタイミング）
css/slide.cssの「transition」という行を探して下さい。こちらも説明が書いてあります。
