BxSlider复制图像并附加到新元素

Question

我正在使用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>

Answer 1

当你追加时，你实际上是在移动元素而不是复制它。复制元素的最常用方法是cloneNode()（JS）或clone()（jQ）。

的 FIDDLE

段

＆＃13;

＆＃13;

// 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);
  });
});

＆＃13;

.bxslider img {
  display: block;
  margin: 0 auto;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请参见下面的实时示例：

// 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>

通过 bxslider Thumbnail pager Next prev buttons 。