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>

现在，当我点击主要大图像的箭头（前一个和下一个）时，缩略图图像会移动。现在，当点击缩略图滑块的箭头（前一个和下一个）并且主要大图像被更改时，我想做同样的事情。任何人？

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

Answer 1

这很简单。绑定箭头上的单击以单击下一个兄弟幻灯片。

警告：如果幻灯片不可见，请执行原始箭头操作。 :)它可以自己做，但没有必要。

它有效:) - 在网站上通过示例测试 - 只需执行此操作即可。：）

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

Answer 2

$('.flex-next').on('click', function(e){ e.preventDefault();$('#slider').flexslider('next') });
$('.flex-prev').on('click', function(e){ e.preventDefault();$('#slider').flexslider('previous') });

大家好我自己修好了。它非常简单，没有提前，是愚蠢的。

如何在单击轮播箭头时更改主滑块图像？

2 个答案: