0

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

<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">‹&lt;/a>
            <a data-slide="next" href="#myCarousel" class="right carousel-control">›&lt;/a>
        </div>
    </div>

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

4

2 回答 2

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>
于 2013-03-15T04:57:44.487 回答
0

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>
于 2018-05-29T16:37:58.730 回答