我正在使用Bxslider，我希望在幻灯片下方有一个部分，以缩略图的形式显示幻灯片中的所有图像，以便例如我的幻灯片中有4个占位符图像......所以下面将是一个部分这4幅图像显示为缩略图。
我设法抓住图像，但很难将它们包装在HTML列表元素中，因为它只是输出一个对象。
有什么想法吗？
的jsfiddle https://jsfiddle.net/hy3w0rxz/1/
HTML
select a,sum(b)
from (select *
,row_number () over (order by id) as rn
,row_number () over (partition by a order by id) as rnp
from t
) t
group by a,rn - rnp
order by min(id)
;
JS
<!-- Main Slideshow -->
<ul class="bxslider bxslider--small">
<li><img src="http://placehold.it/960x720"></li>
<li><img src="http://placehold.it/960x720"></li>
<li><img src="http://placehold.it/960x720"></li>
<li><img src="http://placehold.it/960x720"></li>
</ul>
<div id="bxslider-thumbnails">
</div>
答案 0 :(得分：0)
当你追加时，你实际上是在移动元素而不是复制它。复制元素的最常用方法是cloneNode()（JS）或clone()（jQ）。
的 FIDDLE
// BX Slider initiate
var bx = $('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
// This grabs the images from the main slideshow and put them into the bxslider thumbnails, but it removes the images from the main slideshow instead of copying them. When using `.each()` the most effective way to reference the current element is to use `this` or `$(this)`.
$(document).ready(function() {
var slides = $(".bxslider-small img");
var bxt = document.getElementById('bxslider-thumbnails');
$(slides).each(function(i, value) {
var that = this;
var slidesOutput = this.cloneNode(true);
bxt.appendChild(slidesOutput);
});
});.bxslider img {
display: block;
margin: 0 auto;
}<link href='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css' rel='stylesheet'>
<!-- Main Slideshow -->
<ul class="bxslider bxslider-small">
<li>
<img src="http://placehold.it/100x100/000/fff?text=1">
</li>
<li>
<img src="http://placehold.it/100x100/00f/eee?text=2">
</li>
<li>
<img src="http://placehold.it/100x100/0e0/111?text=3">
</li>
<li>
<img src="http://placehold.it/100x100/f00/fff?text=4">
</li>
</ul>
<!-- This slideshow should grab the main slideshow images and add them to the id below -->
<div id="bxslider-thumbnails">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js'></script>
答案 1 :(得分：0)
请参见下面的实时示例：
// BX Slider initiate
$('.bxslider').bxSlider({
pagerCustom: '#bxslider-thumbnails',
auto: true
});a.active {
display: inline-block;
border: 1px solid blue;
padding: 5px;
padding-bottom: 0px !important;
margin-bottom: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />
<!-- Main Slideshow -->
<ul class="bxslider">
<li><img src="http://placehold.it/960x720/CCCCCC&text=First+Slide"></li>
<li><img src="http://placehold.it/960x720/CCCCCC&text=Second+Slide"></li>
<li><img src="http://placehold.it/960x720/CCCCCC&text=Third+Slide"></li>
<li><img src="http://placehold.it/960x720/CCCCCC&text=Fourth+Slide"></li>
</ul>
<!-- Thumbnails Slideshow -->
<div id="bxslider-thumbnails">
<a data-slide-index="0" href=""><img src="http://placehold.it/100x100/CCCCCC&text=1" /></a>
<a data-slide-index="1" href=""><img src="http://placehold.it/100x100/CCCCCC&text=2" /></a>
<a data-slide-index="2" href=""><img src="http://placehold.it/100x100/CCCCCC&text=3" /></a>
<a data-slide-index="3" href=""><img src="http://placehold.it/100x100/CCCCCC&text=4" /></a>
</div>