carouFredSel slideTo / slideToPage事件 [英] carouFredSel slideTo/slideToPage events
问题描述
使用carouFredSel作为无限循环滑块时,我遇到了一些麻烦,控件可以转到特定的幻灯片。这是我的实现代码:
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:
$('.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.我无法弄清楚模式或我是否正在做首先出现问题。
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.
也许我刚做错了什么,但目标是在页面中央有一个带突出显示项目的滑块然后,如果您将鼠标悬停在某个名称上几秒钟,滑块会移动到该特定照片。
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.
感谢您抽出宝贵时间提供帮助!
Thanks for taking your time to help!
推荐答案
我通过将数组作为参数传递给 slideTo
事件解决了几乎相同的问题。它包含点击的项目和carouFredSel项目索引:
I solved nearly the same problem with passing an array as parameter to slideTo
Event. It contains the clicked item and the carouFredSel Item index:
$li.on('click', function() {
var index = 0;
$('#fred').trigger('slideTo', [$(this), index]);
});
检查示例这里
这篇关于carouFredSel slideTo / slideToPage事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!