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/ 我认为这应该是有效的，如果不是想回来

下面是HTML并从Fiddle中获取Javascript

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

如何在bxslider中动态制作缩略图寻呼机？

1 个答案: