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);