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

Issue

I'm developing my first ever website and I'm not able to enable the pagination dots when I pass the slides.

Image_1

Image_2

I did write the code in the 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>

I really don't know why it's not appearing. Can someone help, please? I did read the API for the swiper, but I'm not founding the mistake or error. Did I miss something?

Solution

You are using swiper version number <7.

"Your mistake": You wrote swiper-container (Swiper 6) instead of swiper (Swiper 7)).

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

https://swiperjs.com/migration-guide

Also, remember to change the initialized code from:

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

To:

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

Demo:

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>

Answered By - Ezra Siton