Javascript 无法为Flexslider插件使用手动控制?
我试图更改flexslider插件的标记,但无法使其正常工作。我想知道如何在包含显示图像的.flexslider div之外设置滑块的缩略图。我想要的是在滑块容器中的大图像和上一个和下一个 按钮。在该div之外,是带有缩略图预览的新div 它来自黄色部分,第三个,带有文件夹图像 Themezilla代码 我查看了那里的代码,看到了以下内容:Javascript 无法为Flexslider插件使用手动控制?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图更改flexslider插件的标记,但无法使其正常工作。我想知道如何在包含显示图像的.flexslider div之外设置滑块的缩略图。我想要的是在滑块容器中的大图像和上一个和下一个 按钮。在该div之外,是带有缩略图预览的新div 它来自黄色部分,第三个,带有文件夹图像 Themezilla代码 我查看了那里的代码,看到了以下内容: jQuery(document).ready(function($){ $("#slider-74"
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
同步:选择器使用另一个滑块镜像在此滑块上执行的操作。我可能没有找到它,但在该主题页上没有看到滑块。很抱歉,我已编辑了我的问题。它来自黄色部分,第三部分。带有缩略图的白色部分@兹古德