Question

我想在bootstrap crousel滑块中的四张图片后重复项目div。我正在分享基本的html ..我想让它变得动态

 <div class="carousel-inner">
              <div class="item  active">
                <div class="row">
                  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <a class="thumbnail" href="#"><img alt="" src="assets/img/logo1.png"></a>
                  </div>          
                  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <a class="thumbnail" href="#"><img alt="" src="assets/img/logo2.png"></a>
                  </div>
                  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <a class="thumbnail" href="#"><img alt="" src="assets/img/logo3.png"></a>
                  </div> 
                  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <a class="thumbnail" href="#"><img alt="" src="assets/img/logo4.png"></a>
                  </div>       
                </div>
              </div>
              <div class="item">
                <div class="row">
                  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <a class="thumbnail" href="#"><img alt="" src="assets/img/logo5.png"></a>
                  </div>          
                  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <a class="thumbnail" href="#"><img alt="" src="assets/img/logo6.png"></a>
                  </div>
                  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <a class="thumbnail" href="#"><img alt="" src="assets/img/logo7.png"></a>
                  </div> 
                  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <a class="thumbnail" href="#"><img alt="" src="assets/img/logo8.png"></a>
                  </div>        
                </div>
              </div>
              </div>

Answer 1

这是我的动态代码，但不是重复项目div：

       <div class="carousel-inner">
         <?php  
              $url = array();
              $args=array(
             'post_type' => 'clients',
              'post_status' => 'publish',
              'posts_per_page' => -1    ); 
         $custom = new WP_Query( $args );
          $abc = array();
         while( $custom->have_posts() ) { $custom->the_post();
            $url= wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'full') );
           $abc[] = $url;

        if ( $c == 0 ){ $class = 'active';}
       else{$class = '';}    }
                 ?>
    <div class="item  <?php  echo $class; ?>">
            <div class="row">
             <?php
                foreach($abc as $v){
            ?>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <a class="thumbnail" href="#"><img alt="" src="<?php echo $v; ?>"></a></div>
            <?php   } ?>   
            </div>
            </div>
             <?php $c++; ?>                
             </div>

Answer 2

这是在循环中4个图像后创建div的代码。

<?php $count = 1;
 while(have_posts() ) {
 $custom->the_post();
{
    if ($count%4 == 1)
    {  
         echo "<div class='item'><div class='row'>";
    } ?>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
              <a class="thumbnail" href="#"><img alt="" src="assets/img/logo5.png"></a>
          </div>                      
    <?php  if ($count%4 == 0)
    {
        echo "</div></div>";
    }
    $count++;
}
if ($count%4 != 1) echo "</div></div>"; ?>

如何在四个项目后重复div？

2 个答案: