Swiper分页不显示答案

【问题标题】：Swiper pagination not showingSwiper分页不显示
【发布时间】：2020-01-27 13:27:52
【问题描述】：

第一次使用swiper，我按照文档在我的代码中添加了html部分，然后在JS中初始化它，我初始化了分页但它没有显示在我的页面上。这是我的代码：

JS：

var Swiper = require('swiper');
   $(document).ready(() => {
      var swiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
        }
      });
    });

HTML：

 <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
    </div>
    <div class="swiper-pagination"></div>
   </div>

谁能解释我做错了什么我得到了 px 中的分页元素高度和宽度？

【问题讨论】：

错误是什么？

标签： jquery swiper

【解决方案1】：

帖子很旧，但仍然没有正确答案，所以：

您需要导入模块。

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

// init Swiper:
const swiper = new Swiper(...);

文档：https://swiperjs.com/get-started/

【讨论】：

【解决方案2】：

如果你没有将它与 webpack 和 transpiler 一起使用，那么你不能使用 require。您必须使用 CDN，或者您可以下载脚本并使用它们。

$(document).ready(() => {
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      }
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

【讨论】：

【解决方案3】：

导入“swiper/components/pagination/pagination.scss”；

放这个就行了

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

请添加可点击的值。

pagination: { el: '.swiper-pagination', clickable: true }

【讨论】：