我使用了flexslider和fancybox。当我在flexslider中单击主图像时，缩略图不会显示在弹出窗口中。
在Fancybox版本3.2.5缩略图显示正确。但是，在fancybox版本2.1.5缩略图滑块显示。但是，图像不显示。
如何在2.1.5版本中设置它？
请帮帮我。
感谢。
示例：https://codepen.io/fancyapps/pen/QQdXwx
<div class="container">
<div id="slider" class="flexslider" style="width:450px;height:400px;">
<ul class="slides">
<li>
<a href="img/1.jpg" rel="gallery" data-fancybox="images">
<img src="img/1.jpg" />
</a>
</li>
<li>
<a href="img/2.jpg" rel="gallery" data-fancybox="images">
<img src="img/2.jpg" />
</a>
</li>
<li>
<a href="img/3.jpg" rel="gallery" data-fancybox="images">
<img src="img/3.jpg" />
</a>
</li>
<li>
<a href="img/4.jpg" rel="gallery" data-fancybox="images">
<img src="img/4.jpg" />
</a>
</li>
<li>
<a href="img/noctua5.jpg" rel="gallery" data-fancybox="images">
<img src="img/noctua5.jpg" />
</a>
</li>
<li>
<a href="img/noctua6.jpg" rel="gallery" data-fancybox="images">
<img src="img/noctua6.jpg" />
</a>
</li>
<li>
<a href="img/noctua1.jpg" rel="gallery" data-fancybox="images">
<img src="img/noctua1.jpg" />
</a>
</li>
<li>
<a href="img/noctua2.jpg" rel="gallery" data-fancybox="images">
<img src="img/noctua2.jpg" />
</a>
</li>
<li>
<a href="img/noctua3.jpg" rel="gallery" data-fancybox="images">
<img src="img/noctua3.jpg" />
</a>
</li>
<li>
<a href="img/noctua4.jpg" rel="gallery" data-fancybox="images">
<img src="img/noctua4.jpg" />
</a>
</li>
<li>
<a href="img/noctua5.jpg" rel="gallery" data-fancybox="images">
<img src="img/noctua5.jpg" />
</a>
</li>
<li>
<a href="img/noctua6.jpg" rel="gallery" data-fancybox="images">
<img src="img/noctua6.jpg" />
</a>
</li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<a href="img/noctua1.jpg">
<img src="img/noctua1.jpg" />
</a>
</li>
<li>
<a href="img/noctua2.jpg">
<img src="img/noctua2.jpg" />
</a>
</li>
<li>
<a href="img/noctua3.jpg">
<img src="img/noctua3.jpg" />
</a>
</li>
<li>
<a href="img/noctua4.jpg">
<img src="img/noctua4.jpg" />
</a>
</li>
<li>
<a href="img/noctua5.jpg">
<img src="img/noctua5.jpg" />
</a>
</li>
<li>
<a href="img/noctua6.jpg">
<img src="img/noctua6.jpg" />
</a>
</li>
<li>
<a href="img/noctua1.jpg">
<img src="img/noctua1.jpg" />
</a>
</li>
<li>
<a href="img/noctua2.jpg">
<img src="img/noctua2.jpg" />
</a>
</li>
<li>
<a href="img/noctua3.jpg">
<img src="img/noctua3.jpg" />
</a>
</li>
<li>
<a href="img/noctua4.jpg">
<img src="img/noctua4.jpg" />
</a>
</li>
<li>
<a href="img/noctua5.jpg">
<img src="img/noctua5.jpg" />
</a>
</li>
<li>
<a href="img/noctua6.jpg">
<img src="img/noctua6.jpg" />
</a>
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</div><div class="container">
<div id="slider" class="flexslider" style="width:450px;height:400px;">
<ul class="slides">
<li>
<a href="img/1.jpg" rel="gallery" data-fancybox="images">
<img src="img/1.jpg" />
</a>
</li>
<li>
<a href="img/2.jpg" rel="gallery" data-fancybox="images">
<img src="img/2.jpg" />
</a>
</li>
<li>
<a href="img/3.jpg" rel="gallery" data-fancybox="images">
<img src="img/3.jpg" />
</a>
</li>
<li>
<a href="img/4.jpg" rel="gallery" data-fancybox="images">
<img src="img/4.jpg" />
</a>
</li>
<li>
<a href="img/5.jpg" rel="gallery" data-fancybox="images">
<img src="img/5.jpg" />
</a>
</li>
<li>
<a href="img/6.jpg" rel="gallery" data-fancybox="images">
<img src="img/6.jpg" />
</a>
</li>
<li>
<a href="img/1.jpg" rel="gallery" data-fancybox="images">
<img src="img/1.jpg" />
</a>
</li>
<li>
<a href="img/2.jpg" rel="gallery" data-fancybox="images">
<img src="img/2.jpg" />
</a>
</li>
<li>
<a href="img/3.jpg" rel="gallery" data-fancybox="images">
<img src="img/3.jpg" />
</a>
</li>
<li>
<a href="img/4.jpg" rel="gallery" data-fancybox="images">
<img src="img/4.jpg" />
</a>
</li>
<li>
<a href="img/5.jpg" rel="gallery" data-fancybox="images">
<img src="img/5.jpg" />
</a>
</li>
<li>
<a href="img/6.jpg" rel="gallery" data-fancybox="images">
<img src="img/6.jpg" />
</a>
</li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<a href="img/1.jpg">
<img src="img/1.jpg" />
</a>
</li>
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" />
</a>
</li>
<li>
<a href="img/3.jpg">
<img src="img/3.jpg" />
</a>
</li>
<li>
<a href="img/4.jpg">
<img src="img/4.jpg" />
</a>
</li>
<li>
<a href="img/5.jpg">
<img src="img/5.jpg" />
</a>
</li>
<li>
<a href="img/6.jpg">
<img src="img/6.jpg" />
</a>
</li>
<li>
<a href="img/1.jpg">
<img src="img/1.jpg" />
</a>
</li>
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" />
</a>
</li>
<li>
<a href="img/3.jpg">
<img src="img/3.jpg" />
</a>
</li>
<li>
<a href="img/4.jpg">
<img src="img/4.jpg" />
</a>
</li>
<li>
<a href="img/5.jpg">
<img src="img/5.jpg" />
</a>
</li>
<li>
<a href="img/6.jpg">
<img src="img/6.jpg" />
</a>
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</div>
=＆GT; jQuery：
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 70,
itemMargin: 10,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
$().fancybox({
selector : '.slides :not(.clone) a',
helpers : {
overlay : {
locked : false,
arrows : true,
nextClick : true
}
},
hash : false,
thumbs : {
autoStart : true,
axis : 'x'
}
});
$('[data-fancybox="images"]').fancybox({
helpers : {
thumbs : {
width : 50,
height : 50
}
}
})