clinic3のトップページの固定画像のスライドショー化カスタマイズ｜2018/07/19

完成したスライドショーサンプルはこちら

カスタマイズ方法

1. まずは、スライドショー用画像３枚と、スライドショー用cssファイルをダウンロードします。
   ファイルのダウンロード
   
   画像を自分で用意する場合、ファイル名は必ず、1.jpg、2.jpg、3.jpgとしておいて下さい。
   JPGなど大文字になっているだけで表示できないブラウザもあるので注意。
   拡張子を変えたい場合は、slide.cssのスライドショー用画像の読み込みの拡張子も全て変更して下さい。
   画像の容量は軽めに準備した方がスムーズに切り替わります。
2. スライドショー用の画像３枚は、お手元のclinic3テンプレートのimagesフォルダに、スライドショー用css（slide.css）はcssフォルダに入れて下さい。
3. index.htmlのhead内にslide.cssを読み込むタグを追加します。
   <link rel="stylesheet" href="css/slide.css">
4. 続いて、html側の
   <div id="mainimg">メインイメージ</div>
   を削除し、代わりに以下を貼り付けて下さい。
   <!--スライドショー-->
   <aside id="mainimg">
   <div class="slide0">slide0</div>
   <div class="slide1">slide1</div>
   <div class="slide2">slide2</div>
   <div class="slide3">slide3</div>
   </aside>
5. 以上です。
   ※IE10以上でcssスライドショーは動作します。IE9は最後の１枚だけを固定表示、IE8以下は真っ白になります。

補足：古いIE（IE9以下）に最初の１枚目を表示させる方法

IE9以下に最初の１枚目だけを適用するスタイルをindex.htmlのhead内に直接記載します。
<!--[if lt IE 10]>
<style>
#mainimg,.slide0,.slide1,.slide2,.slide3 {background: url(images/1.jpg) no-repeat center center;}
</style>
<![endif]-->
head内にはIE8以下でのjsファイルの読み込み箇所があるので、その下にでも追加しておいて下さい。