更换幻灯片时如何使分页点出现？

Question

我正在开发我的第一个网站，但在我通过幻灯片时无法启用分页点。

Image_1

Image_2

我确实在HTML中写了代码：

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
    pagination: {
      el: '.swiper-pagination'
  },
  mousewheel: true,
    keyboard: true
})

.swiper-slide {
  height: auto;
  padding: 4rem 1rem;
}

.swiper-pagination-bullet {
  width: 0.75rem;
  height: 0.75rem;
}

.swiper-pagination-bullet-active {
  background: var(--base-color);
}

<!--SWIPER-->
<link
      rel="stylesheet"
      href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
      />

<!--COMMENTS-->
<section class="section" id="comments">
  <div class="container">
    <header>
      <h2 class="title">Comentários dos nossos destinos favoritos!</h2>
    </header>
    <div class="comments swiper-container">
      <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>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    </section>
  <!--SWIPPER-->

  <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

真不知道为什么没有出现。有人可以帮忙吗？我确实阅读了刷卡器的 API，但我没有发现错误或错误。我错过了什么吗？

Answer 1

您正在使用 swiper 版本号 <7.

“你的错误”：您写的是 swiper-container（Swiper 6）而不是 swiper（Swiper 7））。

Since swiper 7 Swiper container element now should have class swiper instead of swiper-container.

https://swiperjs.com/migration-guide

此外，请记住将 initialized 代码更改为：

const swiper = new Swiper('.swiper-container', {

收件人：

const swiper = new Swiper('.swiper', {

演示：

const swiper = new Swiper('.swiper', {
  slidesPerView: 1,
    pagination: {
      el: '.swiper-pagination'
  },
  mousewheel: true,
    keyboard: true
})

.swiper-slide {
  height: auto;
  padding: 4rem 1rem;
}

.swiper-pagination-bullet {
  width: 0.75rem;
  height: 0.75rem;
}

.swiper-pagination-bullet-active {
  background: var(--base-color);
}

<!--SWIPER-->
<link
      rel="stylesheet"
      href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
      />

<!--COMMENTS-->
<section class="section" id="comments">
  <div class="container">
    <header>
      <h2 class="title">Comentários dos nossos destinos favoritos!</h2>
    </header>
    <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>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    </section>
  <!--SWIPPER-->

  <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

更换幻灯片时如何使分页点出现？

How I can enable the pagination dots to appear whan I change slides?

javascript

html

css

swiper