無料ホームページテンプレート Template Party

css + jQueryスライドショータイプの解説

デモ

使用タグは以下です

※ご利用のテンプレートによってタグが若干異なるかもしれません。

全て画像を使ったタイプのタグ

<aside id="mainimg">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</aside>

1枚目のみ動画を配置し、その他は画像を使ったタイプのタグ

以下のように、全て画像タイプのコードの中に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>

4枚目を追加したい場合は

まず、html側に4枚目のコードを記載します。

<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を開き、3枚目のコードをコピペしたら、.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>

スライドショーのスピード調整

1枚あたりの表示時間の変更

js/main.js内にある、スライドショーの設定箇所の「5000」などの数字を変更して下さい。5000は5秒の事で、5秒ごとに画像が切り替わるという意味になります。尚、数字がテンプレにより異なる場合がありますが、数字の横に説明が書いてありますので探して下さい。

フェード(切り替わる際のタイミング)

css/slide.cssの「transition」という行を探して下さい。こちらも説明が書いてあります。

スライドショー一覧に戻る

クイックCMS