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

cssスライドショーの解説

当ページは「slide.css」を使ったタイプのスライドショー解説です。
cssフォルダに「slide.css」というファイルが入っておらず、jsフォルダに「slide_simple_pack.js」がある場合はこちらのタイプではありませんのでご注意下さい。

スライドショーの種類の確認

ご利用中のテンプレートのスライドショータイプを以下より選んで下さい。スライドショーが入っているhtml側で確認できます。

「slide0」の行がないタイプ

beginner1など

通常のフェードイン・アウトです。
スライドショーの最後に一旦完全にフェードアウト(空白)になるタイプです。

例:
<aside id="mainimg">
<img src="images/1.jpg" alt="" class="slide1">
<img src="images/2.jpg" alt="" class="slide2">
<img src="images/3.jpg" alt="" class="slide3">
</aside>

詳しい解説はこちら

「slide0」の行があるタイプ

cool7, home4, foods8, など

通常のフェードイン・アウトです。
上のスライドショーと構成は同じですが、最後の余白時間がないタイプです。

例:
<aside id="mainimg">
<img src="images/0.jpg" alt="" class="slide0">
<img src="images/1.jpg" alt="" class="slide1">
<img src="images/2.jpg" alt="" class="slide2">
<img src="images/3.jpg" alt="" class="slide3">
</aside>

※「0.jpg」→「1.jpg」のタイプもあります。

詳しい解説はこちら

imgタグを使っていないタイプ

fudosan14など

通常のフェードイン・アウトです。
cssの背景画像を使ったタイプ。

例:
<aside id="mainimg">
<div class="slide0">slide0</div>
<div class="slide1">slide1</div>
<div class="slide2">slide2</div>
<div class="slide3">slide3</div>
</aside>

詳しい解説はこちら

imgタグを使っていないタイプで、横スライドタイプ

shop10band1など

右側からフェードインし、中央で停止、その後左側にフェードアウトします。画像にリンク設定も可。
cssの背景画像を使ったタイプ。

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

詳しい解説はこちら

imgタグを使った横スライドタイプ

job3など

右側からフェードインし、中央で停止、その後左側にフェードアウトします。画像にリンク設定も可。
上の背景画像と同じ動きですが、html側に実際に画像を配置したタイプです。

例:
<!--スライドショー-->
<aside id="mainimg">
<img src="images/0.png" alt="" class="slide0">
<img src="images/1.jpg" alt="" class="slide1">
<img src="images/2.jpg" alt="" class="slide2">
<img src="images/3.jpg" alt="" class="slide3">
</aside>

詳しい解説はこちら