jquery - 单击旋转木马箭头时如何更改主 slider 图像？

Question

我有一个包含大图像的主 div。并在其下方有小缩略图。 我正在写这个:

> <script type="text/javascript">
>                 $(document).ready(function(){
>                   $('#carousel').flexslider({
>                     animation: "slide",
>                     controlNav: false,
>                     animationLoop: false,
>                     slideshow: false,
>                     itemWidth: 150,
>                     itemMargin: 5,
>                     asNavFor: '#slider'
>                   });
> 
>                   $('#slider').flexslider({
>                     animation: "slide",
>                     controlNav: false,
>                     animationLoop: false,
>                     slideshow: false,
>                     sync: "#carousel",
>                     start: function(slider){
>                       $('body').removeClass('loading');
>                     }
>                   });
> 
>                 });
>             </script>

现在，当我单击主要大图像的箭头(上一个和下一个)时，缩略图移动。 现在，当单击缩略图 slider 的箭头(上一个和下一个)并且更改主要大图像时，我想做同样的事情。 有人吗？

你可能想检查这个 http://flexslider.woothemes.com/thumbnail-slider.html 这里点击缩略图箭头不会改变主要的大图像。 我想实现这一目标。

Answer 1

这很简单。 绑定(bind)箭头上的点击以点击下一张同级幻灯片。

注意:如果幻灯片不可见，请执行原始箭头操作。 :) 它可以自己做，但不是必需的。

有效 :) - 通过示例在现场进行测试 - 只需简单地执行此操作即可。 :)

$('.flex-next').on('click', function(e){ e.preventDefault(); $('.flex-active-slide').next('li').click();