3

ここのドキュメントを使用して、単純なカルーセルを実装しようとしています。

http://sorgalla.com/jcarousel/docs/index.html

jQueryが正しく機能し、jCarousel 0.3.0をダウンロードして参照し、ドキュメント（http://sorgalla.com/jcarousel/docs/reference/installation.html）に従っています。最低限必要なCSSを追加しました（ここhttp://sorgalla.com/jcarousel/docs/reference/installation.html#reference-installation-setupによる）この設定があります（有効なJPGの読み込みへの実際のリンクがあります） ：

<div style="height:114px" id="sidebarcarousel">       
    <ul>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
    </ul>            
 </div>

そして私のJavaScriptでは：

$(document).ready(function(e){
    $("#sidebarcarousel").jcarousel();
});

しかし、私がWebページを開いても、まったく何も起こりません。ドキュメントのreadyメソッドは正しく呼び出され、JSまたはCSSファイルへのリンク切れはありません。理由は何でしょうか？カルーセルでコードをコメントアウトしましたが、何も変更されていません。また、JavaScriptコンソールでも問題ありません。最新のSafari、Firefox、Chromeの両方で試しました。

理由は何ですか？私は0.3.0を使用しています（0.3.0は重大な変更であるため、古いバージョンに関連するドキュメントはおそらく機能しないため、持ち込まないでください）。

4

2 に答える 2

1

正しいバージョンの jQuery および jCarousel JavaScript ファイルを含めましたか?

<script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.jcarousel.min.js" type="text/javascript"></script>

この時点では、カルーセルのみが表示されます。コードを追加してスライドさせない限り、何もしません。コードを使用して自動的にスライドさせることも、ここで説明されているようにナビゲーション ボタンを追加することもできます。

于 2013-06-17T07:28:15.050 に答える
0

あなたにはクラスが含まれていませんでした。そのIDをdivではなく、<ul>あなたに与える必要があります。<ul>

あなたの場合：<ul id="sidebarcarousel" class="jcarousel-skin-tango">

なんで？<ul>要素を操作するための .js プラグイン コードでその構造とクラスを使用するためです。

jQuery 呼び出し:

jQuery(document).ready(function() {
     jQuery('#sidebarcarousel').jcarousel();
});

HTML:

<ul id="sidebarcarousel" class="jcarousel-skin-tango">
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
</ul>

ここで作成した例を確認してください: http://jsfiddle.net/UCgEU/2/

PS: この例では、外部プラグイン リソースを追加しました。それらは左側の「リソースの管理」の下にあります。

于 2013-02-14T01:18:28.460 に答える