Problem about swiper for wordpress

[skater2014]

Read the instruction reading css and js

<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    
    <?php
    global $slider_posts;
    $slider_posts = array();
    $slider = array(
      'post_type' => 'post',
      'meta_key' => 'show_in_slider',
      'meta_value' => 'yes',
      'posts_per_page' => 6
      );
    $the_query = new WP_Query( $slider );
    if ( $the_query->have_posts() ) :   
      while ( $the_query->have_posts() ) : $the_query->the_post(); 
      $img_url = get_the_post_thumbnail_url(get_the_ID(), 'full'); //元のサイズ（full）のサムネイルの URL を取得してリンクの href 属性に esc_url() でエスケープ処理して出力
    ?>

    <div class="swiper-slide" style="background-image: url('<?php echo $img_url; ?>');">
      <div class="slider_overlay"></div>
        <div class="swiper_slide_text">
          <h3><?php the_title(); ?></h3>
            <p><?php echo dess_get_excerpt(120); ?></p>
            <p class="slide_read_more"><a href="<?php the_permalink(); ?>">READ MORE</a></p>
        </div>
      </div>

        <?php
          array_push($slider_posts, get_the_ID());
          endwhile;
        endif;
        wp_reset_postdata();
        wp_reset_query();
        ?>

  </div>
 
  <!-- 必要に応じてページネーション -->
  <div class="swiper-pagination"></div>
  <!-- 必要に応じてナビボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>

</div>

//Initialize Swiper for slider for gallary page
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
effect: 'slide',
loop: true,
speed: 3000,

// If we need pagination
pagination: {
el: '.swiper-pagination',
},

// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});

[skater2014]

even though html does not work either

wp_enqueue_script( 'jquery' );

//home page for slick nav responsive nabi menu
wp_enqueue_script( 'slicknav', get_template_directory_uri() . '/js/jquery.slicknav.min.js' );

//hoem page for Slider
wp_enqueue_script( 'slick-slider', get_template_directory_uri() . '/js/slick.min.js' );

//hoem page for フィルタリングやソート機能、グリッドレイアウトプラグイン
wp_enqueue_script( 'isotpe', get_template_directory_uri() . '/js/isotope.pkgd.min.js' );

//hoem page for 要素からはみ出したテキストを省略してくれるjQueryプラグイン
wp_enqueue_script( 'dotdot', get_template_directory_uri() . '/js/jquery.dotdotdot.min.js' );

//hoem page for imagesLoadedを使って画像の読み込みタイミングを管理
wp_enqueue_script( 'imagesloaded', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js' );

//hoem page for js below
wp_enqueue_script( 'js-script', get_template_directory_uri() . '/js/scripts.js' );

//gallary page for slider
wp_enqueue_script( 'swiper-js', get_template_directory_uri() . '/js/swiper-bundle.min.js' );

I dont type Jquery version to read
Just use wordpress Jquery

Help me