12

Carousel 内の現在の位置をユーザーに表示できるように、 JCarousel内の現在のアイテムのインデックスを取得しようとしています。たとえば、「13/20」です。

これどうやってするの？

編集：

最終製品のサンプル:

カルーセルのスクリーンショット

4

11 に答える 11

16

あなたが探しているのは carousel.first だと思います。これにより、最初に表示される要素のインデックスが得られます (最後の表示要素を表示するための carousel.last もあります)。

carousel.first 変数と itemLoadCallback イベントを追加した単純なカルーセルの例に基づいた使用例を次に示します。

<script type="text/javascript">
$(document).ready(function() {
    $('#mycarousel').jcarousel({
        itemLoadCallback: trigger
    });
});

function trigger(carousel, state)
{
    $("#currentImg").html(carousel.first);  
}

</script>

</head>
<body>
<div id="wrap">
  <h1>jCarousel</h1>
  <h2>Riding carousels with jQuery</h2>

  <h3>Simple carousel</h3>
  <p>
    This is the most simple usage of the carousel with no configuration options.
  </p>

  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>

  Current Photo <span id="currentImg">1</span>

</div>
</body>
于 2009-08-25T16:10:46.010 に答える
2

以下を使用できます。

function trigger(carousel, state) { 
    index = carousel.index(carousel.last, size of list);
}
于 2012-05-26T21:46:17.147 に答える
1

私も、jCarousel が使用できない .first、.last、.prevFirst、および .prevLast プロパティを必要なときに返すことを発見しました。

したがって、私はそれを汚い方法で行う必要があり、左オフセットがゼロより大きいかどうかを読み取ることにより、コンテナー内で現在最初にある li タグの ID を返す関数を作成することにしました。もしそうなら、それはゼロより上の左位置を持つ最初のものであり、それは私の現在のスライドです.

次のコードは、foreach() ループのリスト タグに id="listitem-N" を配置したことを前提としています。ここで、N は現在の反復です。

var currSlide = 0;

function getCurrentCarouselItem(){

    $("ul#use-cases li.use-case").each(function(){

        var leftPos = $(this).offset().left;

        if( leftPos >= 0){

            var id = $(this).attr('id').split("-");

            currSlide =  id[1];

            return false;

        }

    });

    return currSlide;

}

each() で id を返さない理由は、each() が関数であり、getCurrentCarouselItem() ではなく、その関数に対してのみ返されるためです。

于 2010-11-14T14:50:21.503 に答える
1

答えが含まれている可能性のある jcarousel コントローラーを強調表示するこの方法を見つけました。

于 2009-08-25T15:58:02.557 に答える
1

正直なところ、jQuery プラグインに期待していたほど明白ではないようです。itemVisibleInCallbackとの2 つのコールバックがありますがitemVisibleOutCallback、一度に 1 つの画像のみを表示する場合にのみ役立ちます。

正直なところ、まったく別の道をたどりたくはありませんが、jCarousel ( jCarousel の作成者には申し訳ありません - コード自体は素晴らしく見えます!)。

于 2009-08-25T16:10:30.813 に答える
1

「jcarousel:animate」イベントにフックして、現在のスライドを jQuery オブジェクトとして取得できます。

$('#mycarousel').on('jcarousel:animate', function(event, carousel) {
  console.log(carousel._target); // this outputs your current slide as jQuery object.
});
于 2014-04-28T05:46:48.317 に答える
1

何をしたいかによって異なりますが、同じことを行うためのより「一般的な方法」を次に示します。代わりに、id ではなくオブジェクト自体を返します。

var currSlide = 0;
    function getCurrentCarouselItem(){
      $("ul#ulcol li.licol").each(function(){
        if ($(this).offset().left >= 0){
            currSlide = this;
            return false;
        }
      });
    return currSlide;
    }
于 2010-12-07T06:48:35.110 に答える
1

ページネーション（箇条書き）がある場合

<p class="jcarousel-pagination"></p>

あなたは単に使用することができます：

var index = $('.active').html();

jcarousel はクラス 'active' をアクティブな弾丸に追加しています。弾丸に番号がある場合は、.html() メソッドで取得するだけです

また、parseInt によってそれらを整数に変換することもできます。

var index = parseInt($('.active').html());
于 2014-10-27T20:00:06.443 に答える
0

カルーセル内のアイテムを並べ替えることができる場合、現在のアイテムのインデックスを取得するために私が見つけた唯一の信頼できる方法は次のとおりです。

$('#myCarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
    var index = $('#'+this.id).index();
    console.log('++ index: %s', index);
});

理由は次のとおりです。

this.idカルーセル内の各アイテムのimage-11 は、順序が変更される前のカルーセル内のアイテムの元のインデックスのようなものであることがわかります。そのインデックスは、jcarousel:animateendイベントと呼び出しを使用して取得できるもののようですcarousel.index($(this).jcarousel('first'))。

ただし、カルーセル内のアイテムの並べ替えを開始すると、そのイベントは役に立たなくなり、ID の数字が誤解を招くようになります。そのため、 の位置を使用して、現在のアイテムのインデックスを決定する必要があり<li>ます<ul>。

于 2016-05-31T05:39:17.427 に答える