title: carouFredSel slideTo/slideToPage events
body: <p>I'm having a bit of trouble with using carouFredSel as an infinite circular slider with controls to go to specific slides. Here is my implementation code:</p>
  
  <pre><code>$('.circular-gallery ul').carouFredSel({
      width: '100%',
      height:270,
      align:'center',
      items: {
          start: 10,
          width:340,
          visible: 10
      },
      prev: {
          button: $('.circular-gallery .prev')
      },
      next: {
          button: $('.circular-gallery .next')
      },
      scroll: {
          items: 1,
          easing: 'quadratic',
          onBefore: function(data){
              var $current = $(data.items.visible[4]);
              if(!data.scroll.duration){ // this happens on init, so just set active class
                  $current.addClass('active');
              } else {
                  var $active = $('.circular-gallery ul li.active');
                  $active.find('.physician-name').fadeOut('normal', function(){
                      $(this).css('display','block').css('visibility','hidden');
                      $active.removeClass('active');
                  });
                  $current.find('.physician-name').css('visibility','visible').hide().fadeIn('normal', function(){
                      $current.addClass('active');
                  });
              }
          }
      },
      auto: {
          play: false
      }
  });
  
  var $items = {};
  $('.physician').hoverIntent(function(){
      slideToPhysician($(this).attr('rel'));
  }, function(){ return false; });
  
  function slideToPhysician(rel){
      var $items = $('.circular-gallery ul li').trigger('currentVisible');
      var index = $items.index($('li.'+rel));
      //console.log(index);
      //$('.circular-gallery ul').trigger('slideToPage', index);
      $('.circular-gallery ul').trigger('slideTo', index);
  }
  </code></pre>
  
  <p>The problem is the index for each element is not constant. It changes each time the slider moves. So I'm having trouble determining which one to slide to. I have classes on each li in my slider and am using the "rel" attribute on my links to pass the corresponding class to the hoverIntent event. During debugging, if I rollover the same name, I might get the index of 6, then it slides to some slide, and if I rollover it again, i get 10. I can't figure out the pattern or if I'm doing something wrong in the first place.</p>
  
  <p>Maybe I have just done something incorrectly, but the goal is to have a slider with the "highlighted" item in the center of the page, then if you hover over a name for a few seconds, the slider moves to that specific photo.</p>
  
  <p>Thanks for taking your time to help!</p>