0

I have the following code which displays some posts on a slick slider and adds a block of content after every two posts.

      <div class="slick-slider pin-news-ticker">
        <?php if (have_posts()) : $counter = 1; $alternate = 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 //endif;
               if($counter++ % 2 == 0) :
                if($alternate++ % 2 == 1) : ?>
                  <div class="slide pin-alternate-content">
                    <h4>Title one</h4>
                    <small>Small text one</small>
                  </div>
                <?php else : ?>
                  <div class="slide pin-alternate-content">
                    <h4>Title two</h4>
                    <small>Small text two</small>
                  </div>
                <?php endif;
                endif;
           endwhile;
        endif;
        ?>
  </div>

I have two of these alternative content block and they alternate. So, two posts display then one of these blocks then another two posts and the other alternative content block after and the process goes on like this. I have this slider on auto play, infinitely so when it gets to the last slide it continues to the first slide on a continuous loop.

The issue I am having is that sometimes the alternative block displays 2 times in a row. This happens when we reach the final slides and alternative content block displays when the loop continues to the beginning of the slides sometimes it displays the same block content as before. What I am looking for is a way to ensure the same alternative block of content never displays twice in a row. How could I achieve that?

EDIT

Slider Settings:

            // Home news ticker
        $('.pin-news-ticker').slick({
            dots: false,
            arrows: false,
            slidesToShow: 3,
            slidesToScroll: 1,
            centerMode: false,
            draggable: true,
            speed: 500,
            autoplay: true,
            vertical: true,
            infinite: true,
            easing: 'swing',
            prevArrow: '<a heref="#" class="slick-nav slick-prev"><i class="fa fa-angle-up"></i></a>',
            nextArrow: '<a heref="#" class="slick-nav slick-next"><i class="fa fa-angle-down"></i></a>',
            responsive: [
                {
                  breakpoint: 1500,
                  settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                    infinite: true,
                  }
                },
                {
                  breakpoint: 1024,
                  settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                  }
                },
                {
                  breakpoint: 768,
                  settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    vertical: false
                  }
                }
                // You can unslick at a given breakpoint now by adding:
                // settings: "unslick"
                // instead of a settings object
              ]
        }).on("afterChange", function(e, slick) {
            $('.pin-news-ticker .slick-slider').slick("setOption", "autoplaySpeed", 5000);
        }).slick("slickPause");

        var initialDelay = 3000;

        setTimeout(function() {
            $('.pin-news-ticker').slick("slickPlay");
        },initialDelay);
3
  • @Paulo could you share your settings used (json parameter passed when calling $('.pin-news-ticker').slick(SETTINGS); ) when creating the slide? – Flavio Cysne Jun 14 '17 at 18:50
  • Hi Flavio. Have added the slider settings for this bit above under the EDIT. – Paulo Jun 21 '17 at 11:07
  • Are you sure that the problem isn't in the slider plugin? This is an issue with slick creating an html clone when it is set to show 3 slides: github.com/kenwheeler/slick/issues/940 – rafawhs Jun 21 '17 at 20:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.