<div class="swiper mySwiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">すべて</div>
    <div class="swiper-slide">おしらせ</div>
    <div class="swiper-slide">採用に関して</div>
  </div>
</div>

<!-- Slider main container -->
<div class="swiper mySwiper2">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
  <?php foreach ($my_posts as $post) : setup_postdata($post); ?>
        <div class="flex box">
            <div class="date"><?php the_time('Y.m.d'); ?></div>
            <div class="cate"><a href="<?php echo $cat_slug; ?>">
        <?php
        // ターム名を表示
        $terms = get_the_terms($post->ID, 'custom_cat'); // タームが所属するタクソノミースラッグを指定
        if (!empty($terms)) { // タームが複数選択されていたらカンマ区切りで表示
          $output = array();
          foreach ($terms as $term) {
            if ($term->parent != 0)
              $output[] = $term->name;
          }
          if (count($output)) {
            echo '<span class="term">' . join(", ", $output) . '</span>';
          } else {
            echo '' . $term->name . '';
          }
        }
        ?>
            </a></div>
            <h2 class="title"><a href="<?php echo get_permalink($post->ID); ?>"><?php echo get_the_title($post->ID); ?></a></h2>
        </div>
  <?php endforeach; ?>
    </div>

    <div class="swiper-slide">
<!-- ↓複数のタームを指定して記事一覧を表示↓ -->
<?php
  $args=array(
    'tax_query' => array(
      array(
    'taxonomy' => 'custom_cat',               //タクソノミーを指定
    'field' => 'slug',
    'terms' => array( 'news' )   //表示したいタームをスラッグで指定
    ),
  ),
  'post_type' => 'infomation',                 //カスタム投稿名を指定
  'order' => 'DESC',                     // 最新順'DESC'・古い順'ASC'
  'posts_per_page'=> 3                  //表示件数（-1で全ての記事を表示）
);
?>
<?php query_posts( $args ); ?>
<?php if (have_posts()): while (have_posts()): the_post(); ?>
        <div class="flex box">
            <div class="date"><?php the_time('Y.m.d'); ?></div>
            <div class="cate"><a href="<?php echo $cat_slug; ?>">
        <?php
    $terms = get_the_terms($post->ID, 'custom_cat');
    foreach($terms as $term):
    echo $term->name;
    endforeach;
?>
            </a></div>
            <h2 class="title"><a href="<?php echo get_permalink($post->ID); ?>"><?php echo get_the_title($post->ID); ?></a></h2>
        </div>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
    </div>

    <div class="swiper-slide">
<!-- ↓複数のタームを指定して記事一覧を表示↓ -->
<?php
  $args=array(
    'tax_query' => array(
      array(
    'taxonomy' => 'custom_cat',               //タクソノミーを指定
    'field' => 'slug',
    'terms' => array( 'recruit' )   //表示したいタームをスラッグで指定
    ),
  ),
  'post_type' => 'infomation',                 //カスタム投稿名を指定
  'order' => 'DESC',                     // 最新順'DESC'・古い順'ASC'
  'posts_per_page'=> 3                  //表示件数（-1で全ての記事を表示）
);
?>
<?php query_posts( $args ); ?>
<?php if (have_posts()): while (have_posts()): the_post(); ?>
        <div class="flex box">
            <div class="date"><?php the_time('Y.m.d'); ?></div>
            <div class="cate"><a href="<?php echo $cat_slug; ?>">
        <?php
    $terms = get_the_terms($post->ID, 'custom_cat');
    foreach($terms as $term):
    echo $term->name;
    endforeach;
?>
            </a></div>
            <h2 class="title"><a href="<?php echo get_permalink($post->ID); ?>"><?php echo get_the_title($post->ID); ?></a></h2>
        </div>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
    </div>

  </div>
</div>
                </div>
            </section>
<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

<style>
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  text-align: center;
}

.swiper-slide:nth-child(3n + 1) {
  background-color: #de4439;
}

.swiper-slide:nth-child(3n + 2) {
  background-color: #fcd500;
}

.swiper-slide:nth-child(3n + 3) {
  background-color: #53c638;
}

.mySwiper2 {
  height: 400px;
  width: 100%;
}

.mySwiper {
  height: 100px;
  box-sizing: border-box;
  padding: 10px 0;
}

.mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
  line-height: 80px;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}
</style>

<script>
const swiper = new Swiper(".mySwiper", {
  spaceBetween: 10,
  slidesPerView: 3
});

const swiper2 = new Swiper(".mySwiper2", {
  thumbs: {
    swiper: swiper
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});
</script>