jQuery jCarousel - выделение внешнего элемента управления (обтекание: круговое) + рандомизация слайдов

У меня была проблема №1, и я нашел решение, которым хочу поделиться. Проблема с циклическими jcarousel заключается в том, что «liindex» не начинает отсчет с 1 после того, как он прошел через все доступные элементы списка, а продолжает считать вверх (как вы заметите, если добавите alert('liindex') внутри функции выделения.

Итак, если у вас есть 3 элемента списка в круговой автокарусели, как только вы закончите прокрутку в первый раз и начнете заново с элемента 1, jcarousel увидит его в 4-м элементе, а не в 1-м.

Вот мое решение (на основе этого), вычисление liindex с модульным значением общего количества элементов и текущего элемента.

            var totalitems = 3; // number of total items in your carousel, you can probably detect it with jquery and replace this 

            function mycarousel_initCallback(carousel) {
                    jQuery('#external ul li a').bind('click', function() {
                            carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                            return false;
                    });
                    carousel.clip.hover(function() {
                            carousel.stopAuto();
                    }, function() {
                            carousel.startAuto();
                    });
            };
            function highlight(carousel,objectli,liindex,listate){
                    actindex = teasersize - (liindex % teasersize); // calculate which item this corresponds to after first scroll
                    jQuery('#external a').removeAttr("class","active");
                    jQuery('#external a#link'+ actindex).attr("class","active");
            };
            function removehighlight(carousel,objectli,liindex,listate){
                    actindex = teasersize - (liindex % teasersize);
                    jQuery('#external a#link'+ actindex).removeAttr("class","active");
            };
            jQuery(document).ready(function() {
                    jQuery("#mycarousel").jcarousel({
                            initCallback: mycarousel_initCallback,
                            wrap: 'circular',
                            scroll: 1,
                            size: totalitems, // previously set in var
                            auto: 7,
                            itemVisibleInCallback:  highlight,
                            itemVisibleOutCallback: removehighlight,
                            buttonNextHTML: null,
                            buttonPrevHTML: null
                    });
            });

И вот как должна выглядеть ваша внешняя навигация на основе js:

            <ul id="external">
                <li><a href="#carouselitem1" id="link1">1</a></li>
                <li><a href="#carouselitem2" id="link2">2</a></li>
                <li><a href="#carouselitem3" id="link3">3</a></li>              </ul>

установите размер тизера на количество элементов списка, которые у вас есть

var teasersize = 4; // if you have 4 list items