Зацикливание 3 статей WordPress в контейнере карусели

Question

В настоящее время я использую Slick Carousel для ротации статей на главной странице моего веб-сайта.

В настоящее время это работает с использованием следующего кода:

 <div class="news-slider">

        <?php $i = 0; ?>

        <?php $the_query = new WP_Query( 'cat=8,7,9&posts_per_page=6' ); ?>

        <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

        <?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>

        <?php if ( $i % 2 ==  0) : ?>
          <div class="wrap">
        <?php endif; ?>

          <div class="news-snippet">
            <div class="news-snippet-thumbnail" style="background: url('<?php echo $edTheDev = $backgroundImg[0] ? $backgroundImg[0] : '/wp-content/themes/quantinsight/assets/img/post-thumb.png'; ?>') no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"></div>

            <div class="news-snippet-content">
              <h3 class="[ f-avenir-book-26 u-ColorBlue ]"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>

              <p class="news-snippet-date"><?php echo the_time('d.m.y'); ?></p>

              <p class=""><a href="<?php the_permalink() ?>">Read More</a></p>
            </div>
          </div>


        <?php if ( $i % 2 != 0 ) : ?>
            </div>
        <?php endif; ?>

        <?php
        $i++;
        endwhile;
        wp_reset_postdata();
        ?>
      </div>

Вместо отображения 2 статей внутри карусели wrap Теперь я хочу отобразить 3 статьи.

Я подумал, что если бы я изменил $ i% 2 на $ i% 3, это обновило бы статьи, отображаемые в каждом переносе, но это полностью сломает карусель.

Будем очень признательны за любые предложения по поводу того, что мне не хватает.

Answer 1

Проблема в том, что он не будет работать с таким модулем%. Это метод, позволяющий открыть div-оболочку и закрыть ее после печати ровно 2 элементов поочередно:

$i:
 0: open, element 1
 1: element 2, close
 2: open,  element 3,
 3: element 4, close

Для% 3 будет получено следующее:

$i:
 0: open, element 1
 1: element 2, close
 2: element 3, close
 3: open, element 4
 4: element 5, close
 5: element 6, close

Таким образом , закрытие будет вдвое больше, чем открытие тегов <div>.

Чтобы исправить это, вам нужно изменить if -условия следующим образом:

 <div class="news-slider">

        <?php
        $i = 0;
        $numItems = 3; // Change the number of items per slide here 
        ?>

        <?php $the_query = new WP_Query( 'cat=8,7,9&posts_per_page=6' ); ?>

        <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

        <?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>

        <?php if ( $i % $numItems ==  0) : ?>
          <div class="wrap">
        <?php endif; ?>

          <div class="news-snippet">
            <div class="news-snippet-thumbnail" style="background: url('<?php echo $edTheDev = $backgroundImg[0] ? $backgroundImg[0] : '/wp-content/themes/quantinsight/assets/img/post-thumb.png'; ?>') no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"></div>

            <div class="news-snippet-content">
              <h3 class="[ f-avenir-book-26 u-ColorBlue ]"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>

              <p class="news-snippet-date"><?php echo the_time('d.m.y'); ?></p>

              <p class=""><a href="<?php the_permalink() ?>">Read More</a></p>
            </div>
          </div>


        <?php if ( ($i + 1) % $numItems == 0 ) : ?>
            </div>
        <?php endif; ?>

        <?php
        $i++;
        endwhile;
        wp_reset_postdata();
        ?>
      </div>

Это работает изменение условия if, закрывающего обертку, чтобы оно срабатывало ровно после каждых $numItem итераций после открытия. Вы можете настроить $numItems на любое положительное количество элементов, которое хотите.