Twitter Bootstrap Carousel - displaying multiple t

问题:

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>

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.

回答1:

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>

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>

回答2:

Twitter Bootstrap Carousel - displaying multiple thumbnails in 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>