0

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.

1 Answer 1

0

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.

2
  • Sorry, but I am getting another issue related to this. I have this implemented on a slider that loops infinitely and when the slider reaches the final slide it continues to the first. However, because of this I get the same pin-alternate-content displaying twice in a row. How would I ensure that same pin-alternate-content never repeats?
    – Paulo
    Jun 1, 2017 at 16:07
  • If you inspect the html that gets outputted, you'll notice that the first alternate content and the last alternate content html is the same, and WordPress can't do anything after outputting that html content. That's something you could do with javascript/jQuery if you're incredibly keen on this feature. You may be able to develop a javascript function that gets called by an event when your slideshow restarts, and it would handle replacing the content if it's the same as the last somehow. Unfortunately that is well outside the scope of a WordPress Stack Exchange question. Jun 3, 2017 at 5:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.