円形カルーセルのjcarouselアイテムのインデックス番号を取得する方法

Question

jcarouselを使用してユーザーインターフェイスを構築しようとしています。カルーセルはいずれの方向にも無期限に移動できる必要があるため、ラップ：円形を使用して構成してください。カルーセルアイテムがクリックされると、それに対応するより大きなイメージがメインコンテンツエリアに表示される必要があります。

現在、ページの最初の2つのサムネイルには、目的の動作が表示されます。 http://www.brookscustom.com/live-edge/live-edge.php#

問題は、ページ上のアイテムの実際の数を超えてスクロールしても、カルーセルがアイテムのインデックス番号を返さないということです。何が起こるかは、jcarouselindexと呼ばれる各項目に割り当てられたカスタム属性です。スクロールするとどちらの方向にも無制限に上下に移動します。私の次のアイデアは、各リスト項目に1、2、3などのidを割り当てることでしたが、そのIDは、ページ上のliの実際の数を超えてスクロールすると失われます。ですから、id＃1-10のアイテムが10個ある場合、右にスクロールするとid＃1は表示されません。彼らはスクリプトによってクラスを与えられますが、あなたがページに与えたIDは保持しません。

これが機能するためには、ユーザーがスクロールしていても適切な大きな画像をターゲットにしていても、各リスト項目の値にアクセスできる必要があります。何か案は？それは有り難いです。

Answer 1

あなたの問題は解決したようですが、私はあなたに非常によく似た何かを実装していました。 Knockoutに精通しているかどうかわかりませんか？それは甘い小さなライブラリです、私はjcarouselと一緒にそれを使用することをお勧めします。

基本的には、画像の観測可能な配列を作成し、これをカルーセルに追加し、カルーセルのクリックで発生する配列内の各項目に関数を追加することができます。この関数は、コンテンツエリア。

Answer 2

は、私は同じ問題に遭遇した側Document.ready機能に

 function mycarousel_initCallback(
             carousel) { 

            //alert(this.mycarousel); 
           // alert("inside carousel"); 
            // Disable autoscrolling if 
            // the user clicks the prev 
            // or next button. 
            carousel.buttonNext 
              .bind(
                'click', 
                function() { 
                 carousel 
                   .startAuto(0); 
                }); 

            carousel.buttonPrev 
              .bind(
                'click', 
                function() { 
                 carousel 
                   .startAuto(0); 
                }); 

            // Pause autoscrolling if 
            // the user moves with the 
            // cursor over the clip. 
            carousel.clip 
              .hover(
                function() { 
                 carousel 
                   .stopAuto(); 
                }, 
                function() { 
                 carousel 
                   .startAuto(); 
                }); 
           } 


           jQuery('#mycarousel') 
             .jcarousel(
               { 
                auto : 2, 
                scroll : 1, 
                wrap : 'last', 
                initCallback : mycarousel_initCallback, 
                itemFallbackDimension: 300, 
                //size: mycarousel_itemList.length, 
                itemFirstInCallback:mycarousel_itemFirstInCallback 
                // itemLoadCallback: {onBeforeAnimation: 
              //mycarousel_itemLoadCallback} 

               });// carousel 
          }); 

        $(".jcarousel-prev") 
        .after(
          "<div><h6 id=\"myHeader\" style=\"color:#FFFFFF;width:68%; top:85%; left:40px;font-size:100%; display: block;\" class=\"counterL\"></h6></div>"); 
        function display(s) { 
        $('#myHeader').html(s); 
        }; 

        function mycarousel_itemFirstInCallback(carousel, item, idx, state) { 
         display(idx +"<i> of </i>"+ $("#mycarousel li").length); 
        }; 

Answer 3

をこのコードを記述します。溶液は、モジュロ関数（除算後に余り）を使用することである：私は、カスタム属性を追加し、よく

var itemVisibleInCallback = function(carousel, item, idx, state) { 
    var $thumbnails = $('.thumbnails img'); 
    var count = $thumbnails.length; 
    var index = (idx + count) % count - 1; //subtract 1 so that the index will be 0-based 
    $thumbnails.eq(index).addClass("selected"); 
    }; 

    $('.my-carousel').jcarousel({ 
    wrap: 'circular', 
    itemVisibleInCallback: itemVisibleInCallback 
    // other unrelated config values... 
    });