Jcarousel多滑塊控件選項問題

Question

我使用jcarousel插件在同一頁面中播放多個滑塊，併爲每個滑塊設置外部控件，但是按下一個控件動畫，所有滑塊都不是屬於它們的控件！ 這裏的代碼：

<div id="mycarousel"> 
     <ul> 
     <li>item</li> 
     <li>item</li> 
     </ul> 
    <div class="control"> 
     <a href="#" class="nav_active">1</a> 
     <a href="#">2</a> 
    </div> 
</div>   

<div id="mycarousel_2"> 
     <ul> 
     <li>item</li> 
     <li>item</li> 
     </ul> 
    <div class="control"> 
     <a href="#" class="nav_active">1</a> 
     <a href="#">2</a> 
    </div> 
</div> 

這裏的JS

/** 
* We use the initCallback callback 
* to assign functionality to the controls 
*/ 
function mycarousel_initCallback(carousel) { 
    jQuery('.control a').bind('click', function() { 
     carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); 
     $('.control a').removeClass('nav_active'); 
     $(this).addClass('nav_active'); 
     return false; 
    }); 
    jQuery('.jcarousel-scroll select').bind('change', function() { 
     carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value); 
     return false; 
    }); 
}; 

// Ride the carousel... 
jQuery(document).ready(function() { 
    jQuery("#mycarousel, #mycarousel_2").jcarousel({ 
     scroll: 1, 
     animation: 1000, 
     easing: 'easeOutQuart', 
     vertical: true, 
     initCallback: mycarousel_initCallback, 
     // This tells jCarousel NOT to autobuild prev/next buttons 
     buttonNextHTML: null, 
     buttonPrevHTML: null 
    }); 
}); 

如何讓每一個滑塊與自己的控制單獨運行？ 謝謝

Answer 1

我有同樣的問題，第一次輪播我使用類控制，但第二次我用class control_2。這有助於我

Answer 2

您可以使用此功能，它爲我工作：

HTML

<div class="carousel_content"> 
    <ul class="mycarousel"> 
     <li>item1</li> 
     <li>item2</li> 
     <li>item3</li> 
     <li>item4</li> 
    </ul> 
    <div class="controls"> 
     <a href="#" class="prev">Previous</a> 
     <a href="#" class="next">Next</a> 
    </div> 
</div>   

<div class="carousel_content"> 
    <ul class="mycarousel"> 
     <li>item1</li> 
     <li>item2</li> 
     <li>item3</li> 
     <li>item4</li> 
    </ul> 
    <div class="controls"> 
     <a href="#" class="prev">Previous</a> 
     <a href="#" class="next">Next</a> 
    </div> 
</div> 

SCRIPT

(function($){ 
    $('.mycarousel').jcarousel({ 
     scroll: 1, 
     animation: 1000, 
     easing: 'easeOutQuart', 
     vertical: false, 
     initCallback: mycarousel_initCallback, 
     buttonNextHTML: null, 
     buttonPrevHTML: null, 
     itemLastOutCallback: { 
      onAfterAnimation: disableCustomButtons 
     }, 
     itemLastInCallback: { 
      onAfterAnimation: disableCustomButtons 
     } 
    }); 

    function mycarousel_initCallback(carousel) { 

     var elementPrev = carousel.container.next('.controls').children('.prev'); 
     var elementNext = carousel.container.next('.controls').children('.next'); 

     elementPrev.bind('click', function() { 
      carousel.prev(); 
      return false; 
     }); 

     elementNext.bind('click', function() { 
      carousel.next(); 
      return false; 
     }); 
    }; 

    function disableCustomButtons(carousel){ 

     var elementPrev = carousel.container.next('.controls').children('.prev'); 
     var elementNext = carousel.container.next('.controls').children('.next'); 

     if (carousel.first == 1) { 
      elementPrev.addClass('inactive'); 
     } else { 
      elementPrev.removeClass('inactive'); 
     } 

     if (carousel.last == carousel.size()) { 
      elementNext.addClass('inactive'); 
     } else { 
      elementNext.removeClass('inactive'); 
     } 

    }; 

})(jQuery);