Flexslider插件无法使用manualControl吗？

Question

我试图更改flexslider插件的标记，但我无法使其正常工作。我想知道this theme from themezilla如何在包含显示图像的.flexslider div之外设置滑块的缩略图。我想要的是slider容器内的大图像和prev以及next  纽扣。除了thumbnail previews之外，将div划分为新的div。

它来自黄色部分，第三个部分，带有文件夹图像。

Themezilla代码 我看起来有代码，看到了这个：

            jQuery(document).ready(function($){
                $("#slider-74").imagesLoaded( function() {
                    $("#slider-74").flexslider({
                        slideshow: false,
                        controlNav: false,
                        prevText: "›",
                        nextText: "‹",
                        namespace: 'zilla-',
                        smoothHeight: true,
                                                        controlNav: true,
                            manualControls: '#zilla-thumbs-nav-74 li',
                                                    start: function(slider) {
                            if( typeof slider.container === 'object' ) {
                                slider.container.click(function(e) {
                                    if( !slider.animating ) {
                                        slider.flexAnimate( slider.getTarget('next') );
                                    }
                                });
                            }
                        }
                    });
                });
            });

我在代码中添加了一些属性：

// Gallery Flexslider
    $('.flexslider').flexslider({
        controlNav: "thumbnails",
        slideshow: false,
        manualControls: '#thumbs-nav li',
        start: function(slider) {
            if( typeof slider.container === 'object' ) {
                slider.container.click(function(e) {
                    if( !slider.animating ) {
                        slider.flexAnimate( slider.getTarget('next') );
                    }
                });
            }
        }
    });

不幸的是，情况有所改变。见下图：

有谁知道如何解决这个问题？

Answer 1

我认为设置的假设是你有1个flexslider显示你的全尺寸图像，然后创建另一个有拇指的flexslider轮播。然后在您的carousel flexslider上将选项asNavFor设置为第一个flexslider的id。它们将是2个独立的组件，但由于设置了此选项，轮播将被绑定到第一个滑块。

以下是使用FlexSlider 2完成的演示：Demo

我很确定您可以使用早期版本的FlexSlider实现此功能，因为它具有asNavFor属性（请参阅文档here）。

asNavFor ：选择器将滑块变为其他滑块的缩略图导航。

另外，我认为您需要将第一个flexslider的sync属性设置为第二个id。

同步：选择器使用另一个滑块镜像对此滑块执行的操作。