jQuery.Swiper.js 分页不起作用，如何设置？

Question

滑块有效，但分页不可见

HTML:

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class="swiper-img" src="/assets/img.png" />
      </div>
      <div class="swiper-slide">
        <img class="swiper-img" src="/assets/img.png" />
      </div>
      <div class="swiper-slide">
        <img class="swiper-img" src="/assets/img.png" />
      </div>
      <div class="swiper-slide">
        <img class="swiper-img" src="/assets/img.png" />
      </div>
    </div>
    <div class="swiper-pagination"></div>

JS:

$(document).ready(() => {
  var swiper = new Swiper(".swiper-container", {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + "</span>";
          },
        },
      });
    })

脚本已连接，滑块有效。但是我们看到根本就没有分页，而且跟样式无关

Answer 1

您正在 <div class="swiper-container">

范围之外使用 <div class="swiper-pagination"></div>

看看我为你写的 jsfiddle 上的这段代码：

https://jsfiddle.net/udf82qaw/

jQuery.Swiper.js 分页不起作用，如何设置？

jQuery.Swiper.js pagination not working, how to setup?

html

jquery

swiperjs