Question

我创建了Carousel，每张幻灯片显示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张幻灯片而且我不想手动创建它们我应该如何在代码中进行创建。因此，当我点击左箭头时，会加载新的图像集。

Answer 1

找出所有图像之间的共同点。换句话说，这段代码：

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

由于这是标准的而不是每张图像都在变化，因此可以在foreach循环中打印出来。查询数据库中的图像URL到数组，然后在html中运行foreach循环：

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

Answer 2

Twitter Bootstrap Carousel - 在Wordpress中显示多个缩略图

<div class="container">
    <!-- Carousel -->
    <div id="promo-carousel" class="carousel slide" data-ride="carousel">

      <!-- Wrapper for slides -->
      <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> <!-- carousel inner -->


      <!-- Controls -->
      <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> <!-- /carousel -->
</div>

Twitter Bootstrap Carousel - 显示多个缩略图

2 个答案: