wordpressで複数段のスライダーを使用したい。

Question

Wordpressで新着記事などをサムネイル付きで並べたいのですが、
Slick.jsなどを使い、スライダーの出力は行ったことはあります。
例：
http://demo-swallow.open-cage.com/

ですが今回は複数段
２列２段と行った具合のレイアウトのスライダーをWordpressでどのようにしたらようかわかりません。
下記サイトのよう実装をしたいです。
参考サイト:
http://webdesignclass.web.fc2.com/bxslider_test/bxslider-lightbox-gallery.html
http://blog.kita-o.com/2015/09/instagram.html

jsの実装方法はわかるのですが、
wordpressでslick.jsを実装の場合

<div class="list">
	<ul class="slider">
			<?php
			if ( have_posts() ) :
				while ( have_posts() ) : the_post ();
			?>
			<li id="post-<?php the_ID(); ?>" <?php post_class('member-link') ?>>
				<a href="<?php the_permalink(); ?>">
					<figure>
						<?php the_post_thumbnail(array(330, 263)); ?>
						<figcaption>
							<h4><?php the_title(); ?></h4>
							<p><?php echo SCF::get('recruit-txt'); ?></p>
						</figcaption>
					</figure>
				</a>
			</li> 
			<?php 
				endwhile;
			endif;
			?>
		</ul>
</div>

これでliを実装してくれてスライダーを実装できるのですが、

<div class="list">
	<ul class="slider">
		<li>aaa</li>
		<li>aaa</li>　
		<li>aaa</li>　
		<li>aaa</li>　
	</ul>
</div>

※細かいタグの記述は省略しています。

現在上記のように出力していますが<li>ごとにスライドしています。

これを

<div class="list">
	<ul class="slider">
		<li>
			<a href="">1</a>
			<a href="">2</a>
			<a href="">3</a>
			<a href="">4</a>
		</li>
		<li>
			<a href="">5</a>
			<a href="">6</a>
			<a href="">7</a>
			<a href="">8</a>
		</li>　
		<li>
			<a href="">9</a>
			<a href="">10</a>
			<a href="">11</a>
			<a href="">12</a>
		</li>　
		<li>
			<a href="">13</a>
			<a href="">14</a>
			<a href="">15</a>
			<a href="">16</a>
		</li>　
	</ul>
</div>

ような出力にしたいです。

また、下記のサイトをみたのですが、これを組み合わせたらできるのか検討しています。
https://whitebear-seo.com/wordpress-newpost-conditional-branch/
https://watanabemitsutoshi.com/3column-article-wordpress
http://webcake.no003.info/webdesign/wp-three-column-output-example.html

<li>の中に四つだけ出力できたらいいのかなと思いました。

以上、Wordpressで複数段のスライダーを使った実装の方法、もしくはその情報があるサイトなどを教えていただきたいです。
よろしくお願いします。

Answer 1

下記のサイトのようにしたらできました。
https://watanabemitsutoshi.com/3column-article-wordpress

<ul>
<?php for ( $i = 1; have_posts(); $i++ ) : the_post(); ?>
        <?php /** 開始タグを出力 */ ?>
        <?php if ( ( $i % 4 ) == 1 ) : ?>

        <li><div class="cast-wrap">
                <!-- .box3 -->
        <?php endif; ?>
        <!-- .posts -->
       	<article>
				 aaa
		<!-- ここに繰り返すコードを記述 -->
       	</article>
        <!-- /.posts -->

        <?php /** 3件出力後終了タグを出力 */ ?>
        <?php if ( ( $i % 4 ) == 0 ) : ?>
        </div></li>
       	<!-- /.box3 -->
        <?php endif; ?>
<?php endfor; ?>

<?php /** 投稿数が4で割り切れずにループが終了した場合終了タグを出力 */ ?>
<?php if ( ( $i % 4 ) != 1 ) : ?>
       </div></li>
        <!-- /.box3 -->
<?php endif; ?>
</ul>