jcarousel, мне нужно: активное состояние на внешнем управлении

Question

Я использую Jcarousel и хочу добавить a.active к текущей опции нумерации страниц. Я видел другие посты вокруг этой же вещи.

<script type="text/javascript">
/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });
}

jQuery('#mycarousel-next').bind('click', function() {
    carousel.next();
    return false;
});

jQuery('#mycarousel-prev').bind('click', function() {
    carousel.prev();
    return false;
});
};

// Ride the carousel...
jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
});
</script> 

То есть код инициализации

и нумерация страниц внутри:

<ul class="jcarousel-control">
    <%  (1..@project.size).each do |n| %>
        <li><a href="#"><%= n %></a></li>
    <% end %> 
</ul>`

Это приложение rails, поэтому rails создает список на основе количества проектов в группе.

Есть идеи? Похоже, все должно быть довольно просто ... Но я совсем не знаю js.

Answer 1

Мне тоже это нужно и, наконец, нашел решение, вот мой код:

jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null,
        itemVisibleInCallback: {
            onAfterAnimation: function(c, o, i, s) {
            --i;
              jQuery('.jcarousel-control a').removeClass('active').addClass('inactive');
              jQuery('.jcarousel-control a:eq('+i+')').removeClass('inactive').addClass('active');
            }
          }
    });

Answer 2

Используйте var size = c.options.size; i = (((i - 1) % size) + size) % size; вместо --i;. Этот код фиксирует модуль отрицательных значений.

Answer 3

Хорошо, так что я думаю, что понял это самостоятельно. Во-первых, если вы просто предоставите

 ul.jcarousel-control li a:focus {background-position:0 -11px}

Устанавливает текущий элемент управления как «вкл.»

Это не работает, пока его не нажмут.