ウォンツケーキ店サイトにJQueryのsliderを導入する

１ヶ月作ってきた「クマヒゲの世界一やさしい」のケーキショップサイト。
ビルボード部分にJQueryのsliderを導入してみましょう。

【準備】
1)昨日制作の５枚のビルボード画像をjpgでそれぞれ保存。名前はmain_photo.jpg、main_photo2.jpg、main_photo3.jpg、main_photo4.jpg、main_photo5.jpg。imagesフォルダに格納。
2)直下にjsフォルダを作り、中にjquery.jsとeasySlider1.5.jsを格納します。
3)index.htmlのheadタグ内に、上記２つのjsへのリンクを貼ります。コードは以下の様になります。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>

4)同じく、slider専用のcssのリンクも貼ります。

<link href="css/Scroll.css" rel="stylesheet" type="text/css" />

5)index.htmlのdiv id="header"の中のulの修了タグの下に以下のコードを加えます。

<div id="slider">
			<ul>				
				<li><a href="item.html"><img src="images/main_photo.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="products.html" title=""><img src="images/main_photo2.jpg" alt="" /></a></li>
				<li><a href="item2.html" title=""><img src="images/main_photo5.jpg" alt="" /></a></li>
				<li><a href="products.html" title=""><img src="images/main_photo4.jpg" alt="" /></a></li>
				<li><a href="order.html" title=""><img src="images/main_photo3.jpg" alt="" /></a></li>			
			</ul>
</div>

※titleとaltには、ビルボード画像中の文章と同じ文章を入れておきます。
6)元々div id="header"の終了タグ直下にあった、main_photo.jpgのimgタグを削除します。
7)ローカルでクロスブラウザでの確認をします。
8)サイトに上げて、再度クロスブラウザ確認をします。