Alternate custom content in the loop

Question

I have a slick slider scrolling through some posts. I also have a couple of divs displaying between every third slide some some different content like so:

      <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>

Now, what I need now is to change this bit below so instead of both pin-alternate-content divs display both at the same time after each other they would instead alternate.

           <?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;?>

So, as slider scrolls, after 3 post slides you would see the first div with "Number one" content and so on and after the next 3 slider posts scroll you would see the second div with "Number two", etc. They would basically alternate instead of displaying both at the same time. Can't really get my head around this, any help would be appreciated.

Answer 1

You could initialize a second counter variable that increments when your first counter variable increments, and use that with modulus to alternate your code blocks.

First initialize two counter variables:

<?php if (have_posts()) : $show_alternate = 1; $which_alternate = 1; while (have_posts()) : the_post(); ?>

Then in your .pin-alternate-content output code you could do something like this:

<?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; ?>

I've tested this code and after three slides, it will display the Number one content, and after the next three slides, the Number two alternate content displays, and after another three slides the Number one content shows again, and it will continue alternating like this for however many sets of three posts you have.