Jquery 同步转盘和滑块以在Flexslider中使用相同的方向导航
我试图弄清楚是否可以在Flexslider中同步旋转木马和滑块,并让它们使用旋转木马中的directionNav来控制两者。我希望它能使转盘幻灯片和滑块幻灯片在您单击上一个和下一个箭头时发生变化。我已经在Github上研究并询问了Flexslider,但没有运气。无论如何,以下是我目前正在使用的脚本:Jquery 同步转盘和滑块以在Flexslider中使用相同的方向导航,jquery,css,flexslider,Jquery,Css,Flexslider,我试图弄清楚是否可以在Flexslider中同步旋转木马和滑块,并让它们使用旋转木马中的directionNav来控制两者。我希望它能使转盘幻灯片和滑块幻灯片在您单击上一个和下一个箭头时发生变化。我已经在Github上研究并询问了Flexslider,但没有运气。无论如何,以下是我目前正在使用的脚本: '<script type="text/javascript"> $(function(){ SyntaxHighlighter.all(); });
'<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
directionNav: true,
animationLoop: false,
slideshow: false,
itemWidth: 150,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
directionNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
'
$(函数(){
SyntaxHighlighter.all();
});
$(窗口)。加载(函数(){
$('旋转木马').flexslider({
动画:“幻灯片”,
控制导航:错误,
方向导航:对,
animationLoop:false,
幻灯片放映:错误,
项目宽度:150,
项目保证金:5,
asNavFor:“#滑块”
});
$(“#滑块”).flexslider({
动画:“幻灯片”,
控制导航:错误,
方向导航:错误,
animationLoop:false,
幻灯片放映:错误,
同步:“旋转木马”,
开始:功能(滑块){
$('body').removeClass('loading');
}
});
});
非常感谢您的帮助。兄弟,您真的需要使用Flexslider吗?Cycle2看起来更适合这样做有一个演示,演示了如何与旋转木马同步没关系,我知道了。我将#Slider的directionNav设置为True,将#Carousel设置为False。然后,我使用绝对定位将上一个和下一个箭头从#滑块定位到#旋转木马旁边。