プラグインなしでWordPress用スライダー導入なら Swiper

<?php
$slideargs = array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'orderby' => 'rand',
  'posts_per_page' => -1
  );
  $the_query = new WP_Query($slideargs);
?>
<div class="swiper">
    <div class="swiper-wrapper easeInOutBack">
    <!-- スライダー用のループ -->
    <?php if ($the_query->have_posts()): while ($the_query->have_posts()): $the_query->the_post(); ?>
      <div class="swiper-slide">
        <div class="m-slider-desc">
          <?php if(has_post_thumbnail()): ?>
          <a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url('large'); ?>" alt="<?php the_title(); ?>"></a>
          <?php endif; ?>
          <div class="m-slider-text">
            <h3 style="text-align:center;margin:2.5rem auto 4rem auto;"><?php the_title(); ?></h3>
          </div>
        </div>
      </div><!-- pair of swiper-slide -->
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    <?php endif; ?>
    </div><!-- pair of swiper-wrapper -->
    <!-- ページネーション用 -->
    <div class="swiper-pagination"></div>
    <!-- ナビゲーションボタン用 -->
    <div class="swiper-button-prev darkred"></div>
    <div class="swiper-button-next darkred"></div>
</div><!-- pair of swiper-->

• (10,11,30,32,33行目)
  前述のとおり、該当行に記載されているクラス名は変更できません。但し、32,33行目の「darkred」のように、クラス名を追加するのはOKです。詳しくは後述しますが、独自のCSSファイルを追加作成し、swiper-bundle.min.cssを補足・上書きする形で適用させます。

.swiper-button-prev.silver, .swiper-button-next.silver
 {
  color: darkred;
}

• （８~27行目）
  サブループを記載し、投稿記事総てのサムネイル画像と投稿記事タイトル名を出力するようにしました。
• （30,32,33行目）
  スライダーには、ページネーション（・・・）、prev・nextボタン（＜　＞）を付けます。但し、スクロールバーは不要と考え、以下の記述は省いています。

 <div class="swiper-scrollbar"></div>

• 左図swiper-sliderr.phpについては、スライダーを設置する固定ページの編集画面にショートコードを記載し、読み込ませています。下図のとおりです。

/*----- swiper----- */

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
}
.swiper-wrapper.easeInOutBack {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) ;
}
.swiper-button-prev.silver, .swiper-button-next.silver {
  color: silver;
}
:root {
  --swiper-theme-color: #007aff;
  --swiper-navigation-size: 44px;
  --swiper-pagination-color: #ffffff;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #eeeeee;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  --swiper-navigation-color: #ffffff;
}
.swiper-pagination-bullet-active{
  background:#000000;
}
}
/* アクティブでないサムネイル */
 .swiper-slide-prev,
.swiper-slide-next{
  filter: brightness(60%);
  -webkit-filter: brightness(60%);
}
/* アクティブなサムネイル */
 .swiper-slide-active {
  filter: brightness(100%);
  opacity: 1;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 35%;
}
.swiper-slide-next h3,
.swiper-slide-prev h3{
  opacity: 0;
}

<?php if (is_page( 5500 )) :?>
<script>
let mySwiper = new Swiper ('.swiper', {
	speed: 800,
  loop: true, 
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
breakpoints: {
    640: {
      slidesPerView: 1.4,
      centeredSlides:true,
      spaceBetween: 20
    },
    980: {
      slidesPerView:1.8,
      centeredSlides:true,
      spaceBetween: 20
    }
  },
   autoplay:{
    delay:4000,
    disableOnInteraction: false,
  },
   pagination: { 
    el: '.swiper-pagination', 
    type: 'bullets', 
    clickable: true, 
  },
 });
</script>
<?php endif; ?>
</body>
</html>