carouFredSel slideTo / slideToPage事件

我使用carouFredSel作为一个无限圆形滑块来控制转到特定幻灯片时遇到了一些麻烦。 这是我的实现代码：

$('.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); } 

问题是每个元素的索引不是常量。 每次滑块移动时它都会改变。 所以我无法确定要滑到哪一个。 我在滑块中的每个li上都有类，并且在链接上使用“rel”属性将相应的类传递给hoverIntent事件。 在调试过程中，如果我翻转相同的名字，我可能得到索引6，然后它滑到一些幻灯片，如果我再次翻转它，我得到10.我无法弄清楚模式或我是否正在做首先是错误的。

也许我刚做错了，但目标是在页面中央放置一个带有“突出显示”项目的滑块，然后如果将鼠标hover在名称上几秒钟，滑块将移动到该特定照片。

感谢您抽出宝贵时间提供帮助！

Answer 1

我将一个数组作为参数传递给slideTo Event解决了几乎相同的问题。 它包含被点击的项目和carouFredSel项目索引：

 $li.on('click', function() { var index = 0; $('#fred').trigger('slideTo', [$(this), index]); }); 

在这里查看示例

Answer 2

这段代码对我有用：

 $('.circular-gallery ul li')('click', function() { $('#fred').trigger('slideTo', $(this).index()); });