Swiper 分页不显示

Question

第一次使用 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 为单位）？

Answer 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/

Answer 2

如果你不将它与 webpack 和转译器一起使用，那么你不能使用 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>