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

Я использую 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>

Это кликабельно, но не показывает изображение. Как я могу сделать миниатюрные изображения кликабельными?