Javascript 同步柔性滑块-柔性方向导航（箭头）

我正在使用flex Slider开发滑块。我有一个想法，将两个FlexSlider同步到一个，就像我们对猫头鹰转盘所做的那样。当flex字幕与图像一起制作动画时，我必须使用两个FlexSlider，因为我希望flex字幕动画与图像动画不同。我已经让他们在这个帮助下同步了 但现在我被困在两点上：

1） 我希望箭头也同步。正如您在我的代码中所看到的，我已经将柔性方向导航分组。现在我想在点击一个按钮后更改两张幻灯片，但这不起作用，因为上面有分层

2） 我希望自定义目标按钮处于活动状态，具体取决于活动幻灯片。例如，我在第三张幻灯片上，我希望第三个目标定位锚标记处于活动状态，如颜色变化等

希望我能把我的问题解释清楚。如果您需要任何进一步的信息，请在下面评论

这里是链接。然后是代码

jQuery（文档）.ready（函数（$）{
$（“#主滑块”）.flexslider({
动画：“幻灯片”，
幻灯片开始：0，
开始：功能（滑块）{
$（'a.slide_thumb'）。单击（函数（）{
$（'.flexslider'）.show（）；
var slideTo=$（this）.attr（“rel”）//从链接获取rel值；
var slideToInt=parseInt（slideTo）//确保此值为整数；
如果（slider.currentSlide！=slideToInt）{
slider.flexAnimate（slideToInt）//将滑块移动到正确的幻灯片上（除非滑块已经显示了我们想要的幻灯片）；
}
});
}
});
$（“#辅助滑块”）.flexslider({
动画：“幻灯片”，
幻灯片开始：0，
开始：功能（滑块）{
$（'a.slide_thumb'）。单击（函数（）{
$（'.flexslider'）.show（）；
var slideTo=$（this）.attr（“rel”）//从链接获取rel值；
var slideToInt=parseInt（slideTo）//确保此值为整数；
如果（slider.currentSlide！=slideToInt）{
slider.flexAnimate（slideToInt）//将滑块移动到正确的幻灯片上（除非滑块已经显示了我们想要的幻灯片）；
}
});
}
});
});
。滑块换行{
位置：相对位置；
宽度：700px；
保证金：0自动
}
#辅助滑块{
位置：绝对位置；
排名：0；
右：0；
宽度：50%；
}
.弯曲方向导航.弯曲上方向，
.flexslider：悬停。弯曲方向导航。弯曲上一个，
.flexslider:悬停.flex方向导航.flex下一步，
.flex方向导航。flex下一个{
顶部：未设置；
左：未设置；
右：未设置；
底部：未设置；
}
.flexslider:hover.flex方向导航。flex prev:hover，
.flexslider:hover.flex方向导航。flex prev:hover{
不透明度：1；
}
#主滑块。柔性方向导航。柔性上，
#辅助滑块。弹性方向导航。弹性上一个{
位置：绝对位置；
顶部：20px！重要；
右：0！重要；
不透明度：1；
}
#主滑块。柔性方向导航。柔性下一步，
#辅助滑块。弹性方向导航。弹性下一步{
位置：绝对位置；
顶部：120px！重要；
右：0；
不透明度：1；
}













文本1



文本2



文本3



文本4



您可以通过创建自己的箭头来应用为链接创建的相同逻辑。删除默认的一个，然后添加自己的侦听器以移动滑块

对于活动链接，只需添加更多的JS来切换类

下面是一个示例，您可以轻松使用CSS来调整所需的位置：


jQuery（文档）.ready（函数（$）{
$（“#主滑块”）.flexslider({
动画：“幻灯片”，
幻灯片开始：0，
开始：功能（滑块）{
$（'a.slide_thumb'）。单击（函数（）{
$（'.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
$（'.flexslider'）.show（）；
var slideTo=$（this）.attr（“rel”）//从链接获取rel值；
var slideToInt=parseInt（slideTo）//确保此值为整数；
如果（slider.currentSlide！=slideToInt）{
slider.flexAnimate（slideToInt）//将滑块移动到正确的幻灯片上（除非滑块已经显示了我们想要的幻灯片）；
}
});
$（'.flex-prev'）。单击（函数（e）{
e、 预防默认值（）；
$（'.active'）.removeClass（'active'）；
$（'.flexslider'）.show（）；
var c=slider.currentSlide；
如果（c！=0）{
c--；
flexAnimate（c）；
$（'.slide_thumb[rel='+c+']）.addClass（'active'）；
}否则{
滑块。柔性动画（3）；
$（'.slide_thumb[rel=3]'）。addClass（'active'）；
}
})
$（'.flex next'）。单击（函数（e）{
e、 预防默认值（）；
$（'.active'）.removeClass（'active'）；
$（'.flexslider'）.show（）；
var c=slider.currentSlide；
如果（c！=3）{
C++；
flexAnimate（c）；
$（'.slide_thumb[rel='+c+']）.addClass（'active'）；
}否则{
slider.flexAnimate（0）；
$（'.slide_thumb[rel=0]'）。addClass（'active'）；
}
})
}
});
$（“#辅助滑块”）.flexslider({
动画：“幻灯片”，
幻灯片开始：0，
开始：功能（滑块）{
$（'a.slide_thumb'）。单击（函数（）{
$（'.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
$（'.flexslider'）.show（）；
var slideTo=$（this）.attr（“rel”）//从链接获取rel值；
var slideToInt=parseInt（slideTo）//确保此值为整数；
如果（slider.currentSlide！=slideToInt）{
slider.flexAnimate（slideToInt）//将滑块移动到正确的幻灯片上（除非滑块已经显示了我们想要的幻灯片）；
}
});
$（'.flex-p）