使用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的索引。首先出了点问题。
也许我做错了什么,但是目标是要在页面中央放置一个带有“突出显示”项目的滑块,然后如果将鼠标悬停在名称上几秒钟,则滑块会移至该特定照片。
感谢您抽出宝贵的时间来帮助您!
最佳答案
通过将数组作为参数传递给slideTo
事件,我解决了几乎相同的问题。它包含单击的项和carouFredSel项索引:
$li.on('click', function() {
var index = 0;
$('#fred').trigger('slideTo', [$(this), index]);
});
检查示例here
关于jquery - carouFredSel slideTo/slideToPage事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15417011/