SWELL│おすすめの記事をスライダー表示するカスタマイズ

<?php
$article = $args['post__in'];
$args = array(
  'post_type' => 'post',
  'post__in' => $article,
  'post_status' => array('publish'),
  'order' => 'asc',
  'orderby' => 'post_date',
);
$query = new WP_Query($args);
$myposts = $query->posts;

if ($myposts):
?>
<div class="motoki-recommended-slider">
	<div class="swiper slider_motoki">
	  <div class="swiper-wrapper">
		  <?php
          foreach ($myposts as $post):
          setup_postdata($post);
          $cat = get_the_category();
          $catname = $cat[0]->cat_name;
          $image_id = get_post_thumbnail_id($post->ID);
          $image = wp_get_attachment_image_src($image_id, 'full', false, '');
          ?>
		  <div class="swiper-slide">
			  <a href="<?php the_permalink(); ?>">
			  <img src="<?php echo $image[0]; ?>">
			  <div class="slides-date"><?php the_time('Y.m.d');?></div>
			  <div class="slides-article"><?php the_title(); ?></div>
			  </a>
		  </div>
		  <?php
          endforeach;
          wp_reset_postdata();
          ?>
	  </div>
	  <div class="swiper-pagination"></div>
	</div>
	  <div class="swiper-button-prev"></div>
	  <div class="swiper-button-next"></div>	
</div>
<?php else: ?>
<?php endif; ?>

function motoki_swiper() {
	wp_enqueue_script('swell_swiper');
	wp_enqueue_style('swell_swiper');
}
add_action('wp_enqueue_scripts', 'motoki_swiper');

function motoki_slide_select() {
    ob_start();
	$args = [
	  'post__in' => array(20175, 20171, 20156),
	];
    get_template_part('motoki_slider',null,$args);
    return ob_get_clean();
}
add_shortcode('motoki_slider_select', 'motoki_slide_select');

function add_swiper_scripts() {
    wp_enqueue_style( 'swiper-css', 'https://unpkg.com/swiper@8/swiper-bundle.min.css');
    wp_enqueue_script( 'swiper-js', 'https://unpkg.com/swiper@8/swiper-bundle.min.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'add_swiper_scripts' );

.swiper-slide{
    width: 48%;
    display: flex;
    flex-shrink: 0;
    position: relative;
    transition-property: transform;
} 
.swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    z-index: 1;
}
.swiper-pagination {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin-top: 16px;
    width: 100%;
}
.swiper-bullet {
    box-shadow: none;
    cursor: pointer;
    display: flex;
    text-decoration: none;
}
.swiper-bullet:before {
    background: #c3c4c7;
    border-radius: 10px;
    content: "";
    height: 10px;
    margin: 4px;
    transition: background .2s ease;
    width: 10px;
}
.swiper-pagination{
	bottom:0!important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #b18e37;
    opacity: 1;
}

/*文字部分*/
.swiper-slide{
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.slides-article, .slides-date {
    color: #000;
}
.slides-date {
    padding: 0 1em 0 1em;
    font-size: .8em;
}
.slides-article {
    padding: 0 1em 1em 1em;
    font-size: 0.9em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
/*矢印関連*/
.swiper-button-next, .swiper-button-prev {
    background: rgb(255 255 255 / 0%);
    color: #b18e37;
}
.motoki-recommended-slider {
    position: relative;
}
.motoki-recommended-slider .swiper-button-prev{
    left: -2em;
}
.motoki-recommended-slider .swiper-button-next{
    right: -2em;
}

var swiper = new Swiper('.slider_motoki', {
  loop: true, //最後に達したら先頭に戻るかどうか
  slidesPerView: 1, //一画面での表示スライド枚数（スマホ）
  spaceBetween: 2, //各スライド間の余白の間隔（スペース）（スマホ）
  centeredSlides: false, //対象のスライドを中央寄せするかどうか
  speed: 3000, //各スライド間の移動速度
  breakpoints: {
    600: {
      slidesPerView: 3, //一画面での表示スライド枚数（PC）
      spaceBetween: 6 //各スライド間の余白の間隔（スペース）（PC）
    }
  },
  autoplay: {
    delay: 3000, //自動再生の1枚のスライドを待機する速度
    disableOnInteraction: true, //Swiperのautoplayがクリック・フリック後も止まらないようにする
  },
  pagination: {
    el: '.swiper-pagination', //ページネーションの要素
    type: 'bullets', //ページネーションの種類
    clickable: true, //クリックに反応させる
  },
  //ナビゲーションボタン（矢印）表示の設定
  navigation: {
    nextEl: '.swiper-button-next', //「次へボタン」要素の指定
    prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
  },
})