jQueryのライブラリ「jCarousel Lite」をホームページに実装したいのですが、サイトにはjavascriptの記述しかなくhtmlの記述サンプルがありません。


■サイト
http://www.gmarwaha.com/jquery/jcarousellite/

知りたいのはデモにある「External Controls」のhtmlソースの書き方です。
どなたかわかりますでしょうか?
「External Controls」のデモはページ右にあるメニュー部下の方にリンクがあります。

回答の条件
  • 1人2回まで
  • 登録:2009/01/25 02:16:29
  • 終了:2009/01/27 00:54:24

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数593ベストアンサー獲得回数3502009/01/25 13:21:40

ポイント60pt

基本的な使用方法は、Installationのページに書いてあります。

http://www.gmarwaha.com/jquery/jcarousellite/#install

※HTMLの記述サンプルはStep 2:にあります。

※動作させるには、ナビゲーションボタンのボックスにクラス名「externalControl」を指定して、画像のリスト部分のクラス名「anyClass」を「jCarouselLite」にする必要があるようです。

変更後は、以下のようになります。

画像のパス・サイズ等は、使用する画像に合わせて変更してください。

<div class="externalControl">

<button class="prev"><<</button></p>

<button class="next">>></button>

<div class="jCarouselLite">

<ul>

<li><img src="image/1.jpg" alt="画像1○○" width="100" height="100"></li>

<li><img src="image/2.jpg" alt="画像2◎○" width="100" height="100"></li>

<li><img src="image/3.jpg" alt="画像3○●" width="100" height="100"></li>

<li><img src="image/4.jpg" alt="画像4●□" width="100" height="100"></li>

<li><img src="image/5.jpg" alt="画像5□○" width="100" height="100"></li>

<li><img src="image/6.jpg" alt="画像6□◎" width="100" height="100"></li>

</ul>

</div>

</div>


ナビゲーションボタンは、好きなように設置すると良いようです。

デモでとは違いますが、クラス名「externalControl」を指定したボックスの下(中)に

<button class="1">1</button>

<button class="2">2</button>

...のようにすると設置できます。


他に何か聞きたいことがある場合は、コメント欄を開けてくださればコメントで返答します。

id:finnapple

教えて頂いたとおり修正してみたのですがうまくいきません、どこか記述ミスがあるのでしょうか?

http://www.geocities.jp/qntbd042/test/test.html

2009/01/26 11:32:19
  • id:finnapple
    教えて頂いたとおり修正してみたのですがうまくいきません、どこか記述ミスがあるのでしょうか?

    http://www.geocities.jp/qntbd042/test/test.html
  • id:rouge_2008
    JavaScriptの記述が一部足りないようです。
    External ControlsのJavaScriptの記述を、以下のように$(function() {と});で挟むと動くと思います。
    ※InstallationのStep 3:参照

    $(function() {

    ここに
    $(".externalControlから
    });までの行を記述

    });

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません