Wordpress奇/偶Bootstrap 3轮播

Question

我正在尝试利用wordpress的奇偶特性来改变幻灯片元素中的内容位置，这取决于它是“奇数”还是“偶数”，就像这个example，它为每张幻灯片翻转，当然，这还不是wordpress，但它是一个有效的例子。有人能用下面的http://165.227.182.166/帮我解决这个问题吗？谢谢!

 <?php
   $slides = array();
   $counter = 0;
   $args = array('category_name' => 'slider', 'nopaging' => true, 'post_per_page'=> 5 );
   $query = new WP_Query($args);
   if($query->have_posts()):while($query->have_posts()):$query->the_post();
   $counter++;
   $temp = array();
   $temp['image'] = the_post_thumbnail_url();
   $temp['content'] = the_field('content');
   $temp['title'] = get_the_title();
   $temp['excerpt'] = the_field('excerpt');
   $slides[] = $temp;
 ?>

 <?php if(count($slides) > 0) { ?>

 <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->


    <!-- Wrapper for slides -->
    <div class="carousel-inner">

     <?php $i=0; foreach($slides as $slide) { extract($slide); ?>
      <div class="item <?php if($i == 0) { ?>active<?php } ?>">
       <!-- <?php if($counter % 2== 0):?> -->

      <div class="col-md-6">
        <img src="<?php $image; ?>" class="img-responsive" />
      </div>
      <div class="col-md-6">
        <h2><?php $title; ?></h2>
        <h4><?php $excerpt; ?></h4>
        <p>
          <?php $content; ?>
        </p>
      </div>

    <?php else:?>

      <div class="col-md-6">
        <h2><?php $title; ?></h2>
        <h4><?php $excerpt; ?></h4>
        <p>
          <?php $content; ?>
        </p>
      </div>
      <div class="col-md-6">
        <img src="<?php $image; ?>" class="img-responsive" />
      </div>

     <?php endif;?>
  </div>
  <?php $i++; }} ?>
 </div>
 </div>
 <?php endwhile;endif;wp_reset_postdata();?>
 ?>

它看起来应该(对我)起作用，但它不能，我似乎无法弄清楚它。

Answer 1

你可以用css解决这个问题，只需创建一个foreach。如下所示：

<?php if(count($slides) > 0) { ?>

 <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->


    <!-- Wrapper for slides -->
    <div class="carousel-inner">

     <?php $i=0; foreach($slides as $slide) { extract($slide); ?>
      <div class="item <?php if($i == 0) { ?>active<?php } ?>">
       <!-- <?php if($counter % 2== 0):?> -->

      <div class="col-md-6">
        <img src="<?php $image; ?>" class="img-responsive" />
      </div>
      <div class="col-md-6">
        <h2><?php $title; ?></h2>
        <h4><?php $excerpt; ?></h4>
        <p>
          <?php $content; ?>
        </p>
      </div>

     <?php endif;?>

css有时会是这样的：

​

.item{
  display:flex;
}

.item:nth-child(odd) .col-md-6{
  order:0;
}

.item:nth-child(even) .col-md-6:first-child{
  order:1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carouselclass">
  <div class="item">
      <div class="col-md-6">
        <img src="https://via.placeholder.com/350x150" class="img responsive" />
      </div>
      <div class="col-md-6">
        <h2>Titulo</h2>
        <h4>Excerpt</h4>
        <p>Content</p>
      </div>
  </div>
  <div class="item">
      <div class="col-md-6">
        <img src="https://via.placeholder.com/350x150" class="img responsive" />
      </div>
      <div class="col-md-6">
        <h2>Titulo</h2>
        <h4>Excerpt</h4>
        <p>Content</p>
      </div>
  </div>
  <div class="item">
      <div class="col-md-6">
        <img src="https://via.placeholder.com/350x150" class="img responsive" />
      </div>
      <div class="col-md-6">
        <h2>Titulo</h2>
        <h4>Excerpt</h4>
        <p>Content</p>
      </div>
  </div>
</div>

​

如果对你有效，请让我知道。