Проблема с внешним управлением 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> 

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

Вы можете использовать это, это работает для меня:

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: true, 
     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);