Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/372.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 无法为Flexslider插件使用手动控制?_Javascript_Jquery_Html_Css - Fatal编程技术网

Javascript 无法为Flexslider插件使用手动控制?

Javascript 无法为Flexslider插件使用手动控制?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图更改flexslider插件的标记,但无法使其正常工作。我想知道如何在包含显示图像的.flexslider div之外设置滑块的缩略图。我想要的是在滑块容器中的大图像和上一个和下一个 按钮。在该div之外,是带有缩略图预览的新div 它来自黄色部分,第三个,带有文件夹图像 Themezilla代码 我查看了那里的代码,看到了以下内容: jQuery(document).ready(function($){ $("#slider-74"

我试图更改flexslider插件的标记,但无法使其正常工作。我想知道如何在包含显示图像的.flexslider div之外设置滑块的缩略图。我想要的是在滑块容器中的大图像和上一个和下一个 按钮。在该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') );
                    }
                });
            }
        }
    });
不幸的是,没有任何变化。见下图:


有人知道如何解决这个问题吗?

我认为应该如何设置,就是您有一个flexslider,显示您的全尺寸图像,然后创建另一个flexslider旋转木马,它有您的拇指。然后在转盘flexslider上,将选项asNavFor设置为第一个flexslider的id。它们将是两个独立的组件,但由于设置了此选项,旋转木马将绑定到第一个滑块

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

我非常确信,您可以通过FlexSlider的早期版本实现这一点,因为它确实具有asNavFor属性,请参见文档

asNavFor:选择器将滑块转换为另一个滑块的缩略图导航

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


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

我可能没有找到它,但在该主题页上没有看到滑块。很抱歉,我已编辑了我的问题。它来自黄色部分,第三部分。带有缩略图的白色部分@兹古德