Twitter Bootstrap Carousel - 显示多个缩略图 [英] Twitter Bootstrap Carousel - displaying multiple thumbnails

问题描述

我创建了Carousel，每张幻灯片显示4个缩略图，我有两个幻灯片。

I've created Carousel which displays 4 thumbnails per slide and I have two slides.

<div class="container">
    <div class="row">
        <div class="carousel slide span8" id="myCarousel">
            <div class="carousel-inner">
              <div class="item active">
                    <ul class="thumbnails">
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                    </ul>
              </div>
              <div class="item">
                    <ul class="thumbnails">
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                    </ul>

    </div>
</div>
                                <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
            <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
        </div>
    </div>

这些幻灯片使用codeigniter从数据库中填充图像。现在的问题是，如果我想创建6-7幻灯片，我不想手动创建它们我应该如何在代码中。因此，当我点击左箭头时，会加载新的一组图片。

These slides are populated with images from database using codeigniter. Now question is, if I want to create 6-7 slides and I don't want to create them all manually how should I go about it in code. So when I click left arrow new set of images is loaded.

推荐答案

查找所有图片之间的公分母。换句话说，此代码段：

Find the common denominator between all the images. In other words, this code snippet:

<li class="span2">
  <div class="thumbnail">
    <img src="IMAGE_URL" alt="">
  </div>
</li>

由于这是标准的，并且不会改变每个图像，你可以在foreach循环中打印出来。从数据库中查询图像url到数组，然后在html中运行你的foreach循环：

Since that is standard and not changing for each image, you can print it out in a foreach loop. Query the image urls from the database into an array, then run your foreach loop inside of the html:

<div class="carousel-inner">
  <div class="item active">
        <ul class="thumbnails">
          <?php foreach($image_url as $image) { ?>
             <li class="span2">
               <div class="thumbnail">
                 <img src="<?php echo $image; ?>" alt="">
               </div>
             </li>
          <?php } ?>          
        </ul>
  </div>

这篇关于Twitter Bootstrap Carousel - 显示多个缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！