Jaguar с несколькими регуляторами с возможностью выбора опции

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

У меня такая же проблема, и для первой карусели я использовал класс управления, но для второго я использовал класс 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);