1

外部ナビゲーション コントロールを使用して、JQuery と jcarousel を使用しています: http://sorgalla.com/projects/jcarousel/examples/static_controls.html

ここでの問題は、次に示すようにナビゲーション ボタンが無効にならないことです。

sorgalla.com/projects/jcarousel/examples/static_simple.html

ボタンのアクティブな画像を非アクティブな画像と交換できるようにするために使用できるコールバックはありますか?

4

1 に答える 1

1

更新しました

デモ: http://jsbin.com/ifomi4/5 ソース: http://jsbin.com/ifomi4/5/edit

あなたの最後のコメントに応えて：

必要なコード (CSS を含む) はすべてソースにあります。コメントを付けたので、簡単に確認できます。

function disableCustomButtons(carousel){

    var prev_class = 'jcarousel-prev-disabled jcarousel-prev-disabled-horizontal';
    if (carousel.first == 1) {
    $('#mycarousel-prev').attr('disabled', 'true').addClass(prev_class);
    } else {
    $('#mycarousel-prev').attr('disabled', 'false').removeClass(prev_class);
    }

    var next_class = 'jcarousel-next-disabled jcarousel-next-disabled-horizontal';
    if (carousel.last == carousel.size()) {
    $('#mycarousel-next').attr('disabled', 'true').addClass(next_class);
    } else {
    $('#mycarousel-next').attr('disabled', 'false').removeClass(next_class);
    }

}

デモ: http://jsbin.com/ifomi4

ソース: http://jsbin.com/ifomi4/edit

tweek は、次のように独自のNEXT&PREVボタンに適切なクラスを追加することで構成されます。

<a class="jcarousel-prev jcarousel-prev-horizontal" href="#">&nbsp;</a>

<a class="jcarousel-next jcarousel-next-horizontal" href="#">&nbsp;</a>

最後に、スライダーの中央に画像を配置するための CSS を少し追加します。

  /* SET THE MARGIN AS YOU NEED */
  .jcarousel-scroll a { margin: 25px 0 }

これは期待どおりに動作するはずです。しかし、デモを見るだけで理解できました。重要な部分についてコメントしました。

于 2010-05-04T13:55:35.753 に答える