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

Question

У меня возникли проблемы с реализацией плагина jCarousel для jQuery. код я использую доступен на http://projects.klavina.com/stackoverflow/index-slider.html

Задача 1: Мне нужно, чтобы выделить активный внешний контроль на слайдер # 1. Я нашел решение на http://heidzir.com/blog/?p=21, но, как уже было сказано в комментариях, это перестает работать, когда ползунок идет во втором цикле.

Задача 2: Мне нужно ранжировать слайды на ползунке # 2 (кавычки) при загрузке страницы. Я нашел способ рандомизировать li (Randomize a sequence of div elements with jQuery), но ползунок перестает работать и скользит только с первой загрузкой.

Любая помощь будет высоко оценена. Спасибо!

Answer 1

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

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

Вот мое решение (основано на this), вычисляя 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 
        }); 
      }); 

И это то, что ваша внешняя навигация должна выглядеть на основе ЯШ:

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

Answer 2

задает teasersize числа элементов списка у вас есть

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