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.

Read more here: Alternate custom content in the loop


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: