PHP while loop, display in pairs of two - php

Question

In Wordpress, I am creating a slider to slide through some content that the user specify. I am using ACF (advanced custom fields) if anyone is familiar with that, however what I am trying to accomplish is to show two content items at a time, while sliding through the jQuery slider.
Here is my loop:
<?php while(has_sub_field('popular_topic')): ?>
<li>
<div class="slide">
<img src="<?php the_sub_field('popular_topic_image'); ?>" alt="" />
<div class="img-wrapper"></div>
<div class="slider-content">
<?php
$len = 60;
$popularTopicTitle = get_sub_field('popular_topic_title');
$newContent = substr($popularTopicTitle, 0, $len);
if(strlen($newContent) < strlen($popularTopicTitle)) {
$newContent = $newContent.'...';
}
echo '<p>'.$newContent.'</p>';
?>
<a class="more-arrow" href="<?php the_sub_field('popular_topic_link'); ?>">Read More</a>
</div>
</div>
</li>
<?php endwhile; ?>
This is currently working, however it only shows one slide. I want it to show two slides and a time. Is there something I can do with a counter? Does this make sense?

Answer 1

my syntax might be a little off but maybe give this a shot?
<?php $i = 0; ?>
<?php while(has_sub_field('popular_topic')): ?>
<?php
$len = 60;
$popularTopicTitle = get_sub_field('popular_topic_title');
$newContent = substr($popularTopicTitle, 0, $len);
if(strlen($newContent) < strlen($popularTopicTitle)) {
$newContent = $newContent.'...';
}
$contentVar[$i] = array (
'img' => the_sub_field('popular_topic_image'),
'title' => $newContent,
'link' => the_sub_field('popular_topic_link')
);
$i++;
?>
<?php endwhile; ?>
<?php $j = 0; ?>
<?php while ($j < $i) : ?>
<li>
<div class="slide">
<img src="<?php echo $contentVar[$j]['img']; ?>" alt="" />
<div class="img-wrapper"></div>
<div class="slider-content">
<p><?php echo $contentVar[$j]['title']; ?></p>
<a class="more-arrow" href="<?php echo $contentVar[$j]['link']; ?>">Read More</a>
</div>
<?php $j++; ?>
<?php if ($j <= $i) : ?>
<img src="<?php echo $contentVar[$j]['img']; ?>" alt="" />
<div class="img-wrapper"></div>
<div class="slider-content">
<p><?php echo $contentVar[$j]['title']; ?></p>
<a class="more-arrow" href="<?php echo $contentVar[$j]['link']; ?>">Read More</a>
</div>
<?php endif; ?>
</div>
</li>
<?php $j++; ?>
<?php endwhile; ?>