Swiper Js 分页不起作用：滑块页面按钮不起作用

Question

当我点击下一个或上一个按钮时，它不起作用。Swiper JS 有常见问题吗？ 我是否做错了什么或者这个版本（10.2）不起作用？ 如果你能找出我错了什么，请告诉我！ 提前致谢！

我已在 HTML 文档中包含了 Swiper.js 所需的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="css/swiper-bundle.min.css">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" /> -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> -->
<!-- CSS -->
    <link rel="stylesheet" href="css/style.css">

----
<!-- Swiper JS -->
<script src="js/swiper-bundle.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script> -->
<!-- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> -->

<!-- JS -->
<script src="js/script.js"></script>

我确保我也包含了分页模块。 这是我的 HTML 代码：

<div class="slide-container swiper">
        <div class="slide-content ">
            <div class="card-wrapper swiper-wrapper">
                <div class="card swiper-slide">
                    <div class="image-content">
                        <span class="overlay"></span>

                        <div class="card-image">
                            <img src="images/profile1.jpg" alt="" class="card-img">
                        </div>
                    </div>

                    <div class="card-content">
                        <h2 class="name">David Dell</h2>
                        <p class="description">Lorem ipsum is a name for a common type of placeholder text. Also known as filler or dummy text, this is text copy that serves to fill a space without saying anything meaningful.</p>

                        <button class="button">View More</button>
                    </div>
                </div>
             </div>
        </div>

        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

这是我的 script.js 代码：

var swiper = new Swiper('.slide-container', {
  slidesPerView: 3,
  spaceBetween: 30,
  slidesPerGroup: 3,
  loop: true,
  loopFillGroupWithBlank: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
}); 

Answer 1

问题不在于Swiper

您的代码有多个错误，并且似乎没有遵循 Swiper 文档中的示例。无关的 DIV“.slide-content”似乎破坏了滑块（需要更多测试）。您只添加了一张幻灯片，因此显然下一张/上一张和分页没有任何作用。您还配置了滑块一次显示 3 张幻灯片（但只有一张）。您还使用一些未命名的 css 库来创建卡片，这可能会影响滑块。

考虑重新开始，使用 Swiper 入门 文档作为指南。

片段

一些修复已添加到代码片段中。运行代码片段以查看滑块导航和分页的工作原理。

var swiper = new Swiper('.slide-container', {
  slidesPerView: 1,
  spaceBetween: 30,
  slidesPerGroup: 1,
  loop: true,
  loopFillGroupWithBlank: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  }
});

<div class="slide-container swiper">
  <div class="card-wrapper swiper-wrapper">

    <div class="card swiper-slide">
      <div class="image-content">
        <span class="overlay"></span>
        <div class="card-image">
          <img src="https://picsum.photos/id/0/200/100" alt="" class="card-img">
        </div>
      </div>
      <div class="card-content">
        <h2 class="name">David Dell</h2>
        <p class="description">Lorem ipsum is a name for a common type of placeholder text. Also known as filler or dummy text, this is text copy that serves to fill a space without saying anything meaningful.</p>
        <button class="button">View More</button>
      </div>
    </div>

    <div class="swiper-slide">
      <h4>Slide 2</h4>
      <img src="https://picsum.photos/id/1/200/100">
    </div>
    <div class="swiper-slide">
      <h4>Slide 3</h4>
      <img src="https://picsum.photos/id/2/200/100">
    </div>
    <div class="swiper-slide">
      <h4>Slide 4</h4>
      <img src="https://picsum.photos/id/3/200/100">
    </div>

  </div>

  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>

</div>


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

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>