循环中的替代自定义内容

时间:2017-05-15 作者:Paulo

我有一个光滑的滑块滚动浏览一些帖子。每隔三张幻灯片之间,我还会显示几个div,其中包括一些不同的内容,如:

      <div class="slick-slider pin-news-ticker">
        <?php if (have_posts()) : $counter = 1; while (have_posts()) : the_post(); ?>

            <!-- Carousel items -->
            <div class="slide">
                <div class="entry entry-smallest-list">
                      <a class="entry-thumb-wrapper" href="<?php the_permalink(); ?>">
                        <div class="entry-thumb">
                          <a href="<?php the_permalink(); ?>">
                            <div class="thumb-wrapper">
                              <?php the_post_thumbnail( \'post-small-rectangle-pin\' );?>
                            </div>
                          </a>
                        </div>
                      </a>
                    <div class="entry-details">
                      <div class="entry-date">
                        <small><?php echo get_the_date(\'M jS, Y\'); ?></small>
                      </div>
                      <h4 class="entry-title">
                        <a href="<?php the_permalink(); ?>">
                          <?php echo mnr_shorten_title(get_the_title()); ?>
                        </a>                      
                      </h4>
                    </div>
                    <div class="clearfix"></div>
                </div> <!-- end .entry-small-list -->
              </div><!--/ .slide-->
            <!--/carousel-inner-->
             <?php
             // Alternate content which displays every third slide
             if($counter++ % 3 == 0) :?>
              <div class="slide pin-alternate-content">
                <h3>Number one</h3>
                <h4>Heading one</h4>
                <small>Small text one</small>
              </div>
              <div class="slide pin-alternate-content">
                <h3>Number two</h3>
                <h4>Heading two</h4>
                <small>Small text two</small>
              </div>
              <?php endif;
           endwhile;
        endif;
        ?>
  </div>
现在,我需要的是更改下面的这一位,以使两个pin alternate content div不是同时显示,而是交替显示。

           <?php
             // Alternate content which displays every third slide
             if($counter++ % 3 == 0) :?>
              <div class="slide pin-alternate-content">
                <h3>Number one</h3>
                <h4>Heading one</h4>
                <small>Small text one</small>
              </div>
              <div class="slide pin-alternate-content">
                <h3>Number two</h3>
                <h4>Heading two</h4>
                <small>Small text two</small>
              </div>
            <?php endif;?>
因此,当滑动条滚动时,在3张幻灯片后,你会看到第一个div的内容是“数字1”,以此类推,在接下来的3张滑动条滚动后,你会看到第二个div的内容是“数字2”,以此类推。它们基本上会交替显示,而不是同时显示这两个div。我真的无法理解这一点,任何帮助都将不胜感激。

1 个回复
最合适的回答,由SO网友:Ben HartLenn 整理而成

您可以初始化第二个计数器变量,该计数器变量在第一个计数器变量递增时递增,并将其与模数一起使用以交替代码块。

首先初始化两个计数器变量:

<?php if (have_posts()) : $show_alternate = 1; $which_alternate = 1; while (have_posts()) : the_post(); ?>
然后在你的.pin-alternate-content 输出代码您可以执行以下操作:

<?php if($show_alternate++ % 3 == 0) : ?>
    <div class="slide pin-alternate-content">

    <?php if($which_alternate++ % 2 == 1) : ?>
        <h3>Number one</h3>
        <h4>Heading one</h4>
        <small>Small text one</small>
    <?php else : ?>
        <h3>Number two</h3>
        <h4>Heading two</h4>
        <small>Small text two</small>
    <?php endif; ?>

    </div>
<?php endif; ?>
我已经测试了这段代码,在三张幻灯片之后,它将显示第一位的内容,在接下来的三张幻灯片之后,将显示第二位的替代内容,在另外三张幻灯片之后,将再次显示第一位的内容,无论您有多少组三篇帖子,它都将继续这样交替显示。

结束