Twitter Bootstrap Carousel - 显示多个缩略图答案

【问题标题】：Twitter Bootstrap Carousel - displaying multiple thumbnailsTwitter Bootstrap Carousel - 显示多个缩略图
【发布时间】：2013-03-03 12:20:01
【问题描述】：

我创建了轮播，每张幻灯片显示 4 个缩略图，我有两个 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 张幻灯片并且我不想手动创建它们，我应该如何在代码中进行。因此，当我单击左箭头时，会加载新的一组图像。

【问题讨论】：

循环打印出每个

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

<div class="container">  <div id="promo-carousel" class="carousel slide" data-ride="carousel">  <div class="carousel-inner" role="listbox"> <?php // Item size (set here the number of posts for each group) $i = 4; // Set the arguments for the query global $post; $args = array( 'numberposts' => -1, // -1 is for all 'post_type' => 'post', // or 'post', 'page' 'orderby' => 'title', // or 'date', 'rand' 'order' => 'ASC', // or 'DESC' ); // Get the posts $myposts = get_posts($args); // If there are posts if($myposts): // Groups the posts in groups of $i $chunks = array_chunk($myposts, $i); /* * Item * For each group (chunk) it generates an item */ foreach($chunks as $chunk): // Sets as 'active' the first item ($chunk === reset($chunks)) ? $active = "active" : $active = ""; echo '<div class="item '.$active.'"><div class="container"><div class="row">'; /* * Posts inside the current Item * For each item it generates the posts HTML */ foreach($chunk as $post): echo '<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">'; the_post_thumbnail(); echo '</div>'; endforeach; echo'</div></div></div>'; endforeach; // Prints the HTML endif; ?> </div>   <a class="left carousel-control" href="#promo-carousel" role="button" data-slide="prev"> <span class="fa fa-arror-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#promo-carousel" role="button" data-slide="next"> <span class="fa fa-arror-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>  </div>