如何在bxslider中動態創建縮略圖頁面？

Question

我正在使用bxslider顯示來自數據庫的圖像，它可以工作，但caroussels的縮略圖不可點擊。

這是我使用的代碼;

<?php if ($object->fotos->has()): ?> 
      <ul class="bxslider"> 
      <?php foreach ($object->fotos as $foto): ?> 
       <?php $photo = wp_get_attachment_image_src($foto->ID, 'large'); ?> 
       <li><img src="<?= $photo[0] ?>"></li> 
      <?php endforeach; ?> 
      </ul> 

      <div id="bx-pager"> 
      <?php foreach ($object->fotos as $foto): ?> 
       <?php $photo = wp_get_attachment_image_src($foto->ID, 'thumbnail'); ?> 
      <a data-slide-index="0" href=""><img src="<?= $photo[0] ?>" /></a> 
      <?php endforeach; ?> 
     </div> 

     <?php endif; ?> 

我想：

<div id="bx-pager"> 
      <?php foreach ($object->fotos as $foto): ?> 
       <?php $photo = wp_get_attachment_image_src($foto->ID, 'thumbnail'); ?> 
      <a data-slide-index="0" href=""><img src="<?= $photo[0] ?>" /></a> 
      <a data-slide-index="1" href=""><img src="<?= $photo[1] ?>" /></a> 
      <a data-slide-index="2" href=""><img src="<?= $photo[2] ?>" /></a> 
      <?php endforeach; ?> 
     </div> 

這是可點擊的，但它並不顯示圖像。我如何使縮略圖圖像可點擊？

Answer 1

入住這 http://jsfiddle.net/L5S2B/2/ 我覺得應該是工作，如果其不超過覺得從小提琴

<!-- slider 1 --> 
<ul class="bxslider"> 
</ul> 

<!-- custom controls --> 
<div class="bxslider-controls"> 
    <a class="pull-left" href="#">PREV</a> 
    <a class="pull-right" href="#">NEXT</a> 
</div> 

找回

下面是HTML和搶的Javascript