HTMLにslideshow.jsを組み込む方法

今回は、Websiteにslideshowを導入して、写真データが代わる代わる投影していく方法を纏めてみました。

当然スライドショーを動かすためには、　slideshow.js　ファイルを　js　フォルダ内に置いてあることが前提になります。

次のslideshowプラグイン情報を参照してください。
使えそうなjQueryのSlideshowプラグイン: Slides

ではNAVの下にスライドショーを組み込む方法です。

img src="images/画像データ名"　と、　alt="データ名"　と、　class="データ名"　などのデータ名は、任意のものであります。データの階層を間違いないようにしましょう。

base-graphic.html

<nav>
    <ul>
        <li>
            ..........
        </li>
    </ul>
</nav>

<div id="graphic">
    <ul>
        <li class="now"><img src="images/slide1.jpg" alt="こだわりの空間" class="image1"></li>
        <li><img src="images/slide2.jpg" alt="チャペル" class="image2"></li>
        <li><img src="images/slide3.jpg" alt="ありがとう" class="image3"></li>
    </ul>
</div>

html内の　slideshow.js　の呼び出し部分（=script）は基本的に　head　内、　body　内のどこにでも置くことが出来ますが、コンピュータは上から下に言語を読み込む仕組みゆえに、　/footer　の下に書き込むのが普通になっております。その方が、　Website　の読み込みが速く進みます。

slideshow.js

...
<footer>
...
</footer>
<script src="js/slideshow.js"></script>
</body>
</html>