Swiper js 根本不起作用，不知道为什么

Question

这是我的代码。为什么它不起作用？当我放置幻灯片内容时，它显示一张卡片而不是三张。并且卡片不能拖动或滑动。如果我在新的 Swiper 中放置任何其他包装类，它会显示 3 张卡片，但仍然无法正常工作。我正在处理 ejs 文件。

导入的CSS：

  <%- include('../../shared/includes/head', {pageTitle:'All products'}) %>
<link rel="stylesheet" href="/styles/products-landing.css">

<!-- Swiper -->

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="/styles/swiper.css">
 

       
</head>

体内主要部分：

      <main>


<h1 id = "trending">Trending Products</h1>


<%- include('../../shared/includes/swiper-section.ejs') %>
      



   </main>

包括滑动部分：

<ul id="product-grid">
   
 

    <div class ="slide-content">
 
 
 
 
      <div class = "swiper-wrapper">
 
 
 
 
   <div class = "swiper-slide"> 
 
 
    <div class="product-item">
      <img src="<%= dhea.imageUrl %>" alt="<%= dhea.title %>" class = "product-image"/>
      <div class="product-item-content">
        <h2 class = "product-title"><%= dhea.title %></h2>
        <div class="product-item-actions">
          <% if (locals.isAdmin) { %>
          <a class="btn" href="/admin/products/<%= dhea.id %>">View and Edit</a>
          <div class="divider">
            <button
              class="btn btn-alt"
              data-productid="<%=dhea.id %>"
              data-csrf="<%=locals.csrfToken %>"
            >
              Delete
            </button>
            <% } else { %>
                <a class= "btn btn-alt" href="/products/<%= dhea.id %>">View Details</a>
                <% } %>
          </div>
        </div>
      </div>
    </div>
 </div>
 
 
 
 <div class = "swiper-slide"> 
    
    <div class="product-item">
       <img src="<%= fivehtp.imageUrl %>" alt="<%= fivehtp.title %>" class = "product-image"/>
       <div class="product-item-content">
          <h2 class = "product-title"><%= fivehtp.title %></h2>
      <div class="product-item-actions">
         <% if (locals.isAdmin) { %>
          <a class="btn" href="/admin/products/<%= fivehtp.id %>">View and Edit</a>
          <div class="divider">
             <button
             class="btn btn-alt"
             data-productid="<%=fivehtp.id %>"
             data-csrf="<%=locals.csrfToken %>"
             >
             Delete
          </button>
          <% } else { %>
             <a class= "btn btn-alt" href="/products/<%= fivehtp.id %>">View Details</a>
             <% } %>
          </div>
       </div>
    </div>
 </div>
 </div>
 <!-- <div class="product-card"></div> -->
 <div class = "swiper-slide"> 
    
    <div class="product-item">
       <img src="<%= melatonin.imageUrl %>" alt="<%= melatonin.title %>" class = "product-image"/>
       <div class="product-item-content">
          <h2 class = "product-title"><%= melatonin.title %></h2>
      <div class="product-item-actions">
         <% if (locals.isAdmin) { %>
          <a class="btn" href="/admin/products/<%= melatonin.id %>">View and Edit</a>
          <div class="divider">
             <button
             class="btn btn-alt"
             data-productid="<%=melatonin.id %>"
             data-csrf="<%=locals.csrfToken %>"
             >
             Delete
          </button>
          <% } else { %>
             <a class= "btn btn-alt" href="/products/<%= melatonin.id %>">View Details</a>
             <% } %>
          </div>
       </div>
    </div>
 </div>
 </div>
    
    
    </div>
 
    </div>

    
    
 </ul>
       <!-- Swiper js -->
 
       <script src="https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.js"></script>
       <script src = "/scripts/swipre.js" defer></script>

new Swiper(".slide-content", {
    spaceBetween: 30,
    effect: "fade",
    observer:true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });

我在不使用包含功能的情况下进行了尝试。我尝试将 swiper 设置为其他包装器 div。使用下载的和 URL css 和 js 文件。