jQuery UIを使用した画像スライダーについて

質問

お世話になります。

当方、htmlとcssの知識しかなく、Javascriptはほとんど未知の領域なのですが、
ホームページに動きを付けたくて、jQuery UIを使用した画像スライダーの設置方法を載せたサイトを探していました。
そこで、下記のサイトさんのスライダーがイメージに近かったので使用したいと考えています。

ttp://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery#a_image_rotator

サンプルページ
ttp://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB

そっくりそのまま実装することができ、スタイルシートの記述をいくつかいじって
枠の幅や画像の大きさを変更するまではできたのですが、
項目を追加することができませんでした。。
※サンプルページで、4つある項目の一番下ハニートースト＠…の下にさらに項目を追加して、5つか6つくらい画像がスライドするようにしたいのです。

htmlファイルで、<li>や<div>を追加して、id="nav-fragment-4"をid="nav-fragment-5"にして
連番にもしましたが、それだけではうまく画像が表示されません。
※4番目のタグをコピーして5番目を作りましたが、5番目をクリックしても画像が表示されず真っ白で、そのあと4番目をクリックすると、画像が2つ縦に連なって表示されます。

javascriptの記述で最大何枚画像が表示されるという記述があるのでしょうか？

素人の質問なので、わかりにくい部分はあると思いますが、
何卒、お力添えよろしくお願いします！！

回答No.1

shiro-karasu

サンプルをそのまま実装して確認してみました。
問題なく実装できました。

最大枚数を限定するような記述はありません。
単純に数だけ増やすのであれば、以下で出来ます。

要点は２個です。
必要な箇所を抜粋すると、こうなります　↓

１）メニュー？部分のリストの設定

リスト内、<li>に対し、通しのidを付ける必要がある。

<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
<a href="#fragment-1">
<img src="画像URL（サムネイル）" alt="" />
<span>文章</span>
</a>
</li>

１個めの<li>ですが、通しの番号が振られているであろう箇所が２箇所。
<li>に与えられているid　と、<a>に与えられているターゲットです。
これらに対して連番をつけてください。

２）表示部の設定

<!-- 1 -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="画像URL（表示する画像）" alt="" />
<div class="info" >
<h2><a href="リンク">タイトル</a></h2>
<p>文章</p>
</div>
</div>

<div>のidですが、fragment-通し番号 と、設定するだけのようです。

まとめると、変更する必要がある場所は以下です。

<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-連番">
<a href="#fragment-連番"></a>
<div id="fragment-連番" class="ui-tabs-panel" style="">

メニュー部を増やせない原因は、リストをうまく追加できていないことが原因だとおもいます。
<li>も<div>も、単純にコピペしてもらい、
連番部分 4をすべて、5～にして増えないようであれば、css に overflow:hidden があったりしないか確認してみるといいかもしれません。