Swiper 7轮播切换时分页指示点不显示，如何开启显示？

问题原因 #

• 分页元素位置错误
  你把<div class="swiper-pagination"></div>写在了.swiper-wrapper内部，Swiper要求分页元素必须和.swiper-wrapper平级，作为轮播容器的直接子元素，放在wrapper内部会被识别为轮播内容，不会作为分页组件渲染。
• Swiper 7版本类名不匹配
  你当前引入的是7.x版本的Swiper资源，该版本开始默认容器类名从旧版的swiper-container调整为swiper，你初始化时选择器.swiper-container和类名规则不匹配，导致组件初始化异常。
• 可选排查项：自定义颜色变量未定义
  你在CSS中给激活态分页点设置了background: var(--base-color)，如果你的全局样式中没有声明--base-color这个CSS变量，激活态的分页点会继承默认透明或者白色，可能和背景融合无法观察到。

修正方案 #

1. HTML结构修正 #

调整分页元素位置，修改容器类名适配v7版本规则：

<!--COMMENTS-->
<section class="section" id="comments">
  <div class="container">
    <header>
      <h2 class="title">Comentários dos nossos destinos favoritos!</h2>
    </header>
    <!-- 容器类名改为swiper适配v7，保留原有comments类 -->
    <div class="comments swiper">
      <div class="swiper-wrapper">
        <div class="comment swiper-slide">
          <p>
            <span>&ldquo;</span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Labore a autem animi, optio unde laboriosam delectus
            temporibus consequatur?
            <cite>
              <img
                   src="Assets\Photos\Leonardo_Alves.jpg"
                   alt="Leonardo Alves sorrindo"
                   />
              Leonardo Alves
            </cite>
          </p>
        </div>
        <div class="comment swiper-slide">
          <p>
            <span>&ldquo;</span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Labore a autem animi, optio unde laboriosam delectus
            temporibus consequatur?
            <cite>
              <img
                   src="Assets\Photos\Juliana_Bittencourt.jfif"
                   alt="Juliana Bittencourt sorrindo"
                   />
              Juliana Bittencourt
            </cite>
          </p>
        </div>
        <div class="comment swiper-slide">
          <p>
            <span>&ldquo;</span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Labore a autem animi, optio unde laboriosam delectus
            temporibus consequatur?
            <cite>
              <img
                   src="Assets\Photos\Leonardo_Alves.jpg"
                   alt="Leonardo Alves sorrindo"
                   />
              Leonardo Alves
            </cite>
          </p>
        </div>
      </div>
      <!-- 分页移到swiper-wrapper外面，和它平级 -->
      <div class="swiper-pagination"></div>
    </div>
    </section>

2. JS初始化代码修正 #

把选择器改为适配新的.swiper类，可额外添加分页点可点击配置：

const swiper = new Swiper('.swiper', {
  slidesPerView: 1,
  pagination: {
    el: '.swiper-pagination',
    clickable: true // 可选配置，支持点击分页点跳转对应幻灯片
  },
  mousewheel: true,
  keyboard: true
})

3. 可选CSS修正 #

如果未全局定义--base-color变量，可直接替换为固定颜色值：

.swiper-pagination-bullet-active {
  background: #007aff; /* 替换为你的站点主题色即可 */
}

内容的提问来源于stack exchange，提问作者Leonardo Alves