我是WordPress主题开发的新手，我想使用Swiper JS作为我的滑块。我已经尽我所能了，但不起作用。有没有人能帮我设置一下？
因为我页面中的滑块是这样设置的：

<php?

<div class="swiper tree">
 <div class="swiper-wrapper">
   <div class="swiper-slide slide_1">slide 1</div>
   <div class="swiper-slide slide_1">slide 2</div>
   <div class="swiper-slide slide_1">slide 1</div>
 </div>
</div>

?>

这就是我在main.js文件中编写脚本的方式，然后我将其添加到函数.php中：

<script>

var swiper = new Swiper(".slide", {
  slidesPerView: 1,
  spaceBetween: 10,
  autoplay: {
    delay: 54566,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  breakpoints: {
    280: {
      slidesPerView: 1,
      spaceBetween: 10,
    },
    390: {
      slidesPerView: 1,
      spaceBetween: 10,
    },
    485: {
      slidesPerView: 2,
      spaceBetween: 15,
    },
    510: {
      slidesPerView: 2,
      spaceBetween: 10,
    },
    640: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    768: {
      slidesPerView: 3,
      spaceBetween: 15,
    },
    1024: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
  },
});

<script/>

我添加了main.js文件以及Swiper css和Swiper js文件：

add_action('wp_enqueue_scripts', function(){

      /**include style file */

      //styling ========================

        // adding swiper-bundle files
        wp_enqueue_style('swiper-bundle-css',get_template_directory_uri().'/place/css/swiper-bundle.min.css');

        // adding stylesheet
        wp_enqueue_style('custom-style',get_stylesheet_uri());

     //styling ========================

     //javascripts =======================
          // adding js file
          wp_enqueue_script('main-js',get_template_directory_uri().'/assets/js/main.js', [], '1.1',);

           // adding jquery file
           wp_enqueue_script('jquery',get_template_directory_uri().'/place/js/jquery-3.6.1.min.js');

            // adding swiper js file
            wp_enqueue_script('swiper-bundle-js',get_template_directory_uri().'/place/js/swiper-bundle.min.js', [],'8.4.2',);

});