Как сделать миниатюрный пейджер динамически в bxslider?

Question

Я использую bxslider для отображения изображений из базы данных, это работает, но эскизы каруселей не доступны.

Это код, который я использую;

<?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/ Я думаю, что она должна быть работа, если ее не чем чувствовать, чтобы вернуться

Ниже HTML и захватить Javascript из Fiddle

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