jquery 滑动器分页未显示

5uzkadbs 于 2023-03-29 发布在 jQuery

关注(0)|答案(7)|浏览(199)

第一次使用swiper，我按照文档在代码中添加了html部分，然后在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

来源：https://stackoverflow.com/questions/59932127/swiper-pagination-not-showing

7条答案

按热度按时间

0md85ypi1#

帖子很旧，但仍然没有正确答案，所以：
您需要导入模块。

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

赞(0）回复(0）举报 2023-03-29

xriantvc2#

如果你不使用它与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>

赞(0）回复(0）举报 2023-03-29

33qvvth13#

导入“swiper/components/pagination/pagination.scss”;
把这个放进去就行了

赞(0）回复(0）举报 2023-03-29

euoag5mw4#

请添加可点击值。
pagination: { el: '.swiper-pagination', clickable: true }

赞(0）回复(0）举报 2023-03-29

yfwxisqw5#

如果导入分页和导航并不能解决这个问题，就像上面提到的那样。确保你也有一个空的div标签，类为swiper-pagination。
就像这样：

<div class="rewards-swiper">
  <div class={swiperClass} ref={el => this.swiperRef = el}>
    <div class="swiper-wrapper">
      <slot />
    </div>
    <div class="swiper-pagination" />    <-- here
  </div>
</div>

赞(0）回复(0）举报 2023-03-29

holgip5t6#

使用'import 'swiper/modules/pagination/pagination.scss'代替此'swiper/css/pagination'
由于某些原因，即使安装了相同的版本，您也不会下载CSS模块。
但是这个有效！！

赞(0）回复(0）举报 2023-03-29

snz8szmq7#

对于React，您需要导入捆绑的css文件。