wordpress: SQLで取得したデータをスライドショーで表示したい

前提・実現したいこと

現在ニュース記事を一覧でDBから取得しているのですが、
スライドショーで１記事ずつ表示したいと考えております。
色々調べてみたのですが、方法が見つからず、教えていただきたいです。

該当のソースコード

news.php

PHP
1	<div class="sec-news"><div class="sec-in-s">
2<?php if (have_posts()) : ?>
3	<ul class="list-news">
4<?php while (have_posts()) : the_post(); ?>
5	<li><time datetime="<?php esc_html(the_time('Y-m-d')); ?>">
6            <?php esc_html(the_time('Y.m.d')); ?></time>
7            <a href="<?php esc_url(the_permalink()); ?>">
8            <?php esc_html(the_title()); ?></a></li>
9<?php endwhile; ?>
10	</ul>
11<?php endif; ?>

query.php

PHP
1/**
2 * Iterate the post index in the loop.
3 *
4 * @since 1.5.0
5 *
6 * @global WP_Query $wp_query WordPress Query object.
7 */
8function the_post() {
9	global $wp_query;
10	$wp_query->the_post();
11}

補足情報（FW/ツールのバージョンなど）

PHP 7.4
wordpress 5.4

行動規範の内容に同意します

回答1件

自己解決

下記のように実装しました。

php
1<!-- サブクエリをセット -->
2<?php $args = array(
3    'post_type' => 'news',  // 投稿タイプ
4    'posts_per_page' => 3, // 表示件数。 -1ならすべての投稿を取得
5    'orderby' => 'date',    // ソート
6    'order' => 'DESC');    // 降順(日付の場合、日付が新しい順)?>
7<?php $loop = new WP_Query($args);?>
8
9<?php if ($loop->have_posts()) : ?>
10		<ul class="list-topics">
11<?php while ($loop->have_posts()) : $loop->the_post(); ?>
12			<li id="slides"><time datetime="<?php esc_html(the_time('Y-m-d')); ?>"><?php esc_html(the_time('Y.m.d')); ?></time><a href="<?php esc_url(the_permalink()); ?>"><?php esc_html(the_title()); ?></a></li>
13<?php endwhile; ?>
14        </ul>
15
16<?php endif; ?><?php wp_reset_postdata();?>
17</div></div>

css
1#page-home #main .sec-topics .sec-in-s .list-topics {
2    overflow: hidden;
3    position: relative;
4    height: 140px;
5    top: 10px;
6    list-style: none;
7}

js
1  function switchByWidth() {
2    if (window.matchMedia('(max-width: 767px)').matches) {
3      //スマホ処理
4      var loop = setInterval(function () {
5        //li先頭要素のクローンを作成
6        var clone = $('.list-topics li:first').clone(true);
7        //li先頭要素のマージントップにマイナスを指定しアニメーションさせる
8        $('.list-topics li:first').animate(
9          {
10            marginTop: '-84px',
11          },
12          {
13            duration: 1500,
14            complete: function () {
15              //処理完了時に先頭要素を削除
16              $('.list-topics li:first').remove();
17              //クローンをliの最後に追加
18              clone.clone(true).insertAfter($('.list-topics li:last'));
19            },
20          }
21        );
22      }, 3000);
23    } else if (window.matchMedia('(min-width:768px)').matches) {
24      //PC処理
25      var loop = setInterval(function () {
26        //li先頭要素のクローンを作成
27        var clone = $('.list-topics li:first').clone(true);
28        //li先頭要素のマージントップにマイナスを指定しアニメーションさせる
29        $('.list-topics li:first').animate(
30          {
31            marginTop: '-133px',
32          },
33          {
34            duration: 1500,
35            complete: function () {
36              //処理完了時に先頭要素を削除
37              $('.list-topics li:first').remove();
38              //クローンをliの最後に追加
39              clone.clone(true).insertAfter($('.list-topics li:last'));
40            },
41          }
42        );
43      }, 3000);
44    }
45  }
46  window.onload = switchByWidth;
47  window.onresize = switchByWidth;