Bullets não aparece | HTML e CSS: responsividade com mobile-first


    <link
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
      rel="stylesheet"
    />
    <!-- Adicione o script do Swiper abaixo -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
   
  ....
  

   
          <div class="swiper-slide">
            <img src="./img/Guia Front-end.svg" alt="Im4" />
          </div>
          <div class="swiper-slide">
            <img src="./img/Portugol.svg" alt="Im5" />
          </div>
          <div class="swiper-slide">
            <img src="./img/Nodejs.svg" alt="Im6" />
          </div>
          ...
        </div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>

      <div class="card">
        <div class="card__descricao">
          <div class="descricao">
            <h3 class="descricao__titulo">
              Talvez você também se interesse por...
            </h3>
            <h2 class="descricao__titulo-livro">Angular 11 e Firebase</h2>
            <p class="descricao__texto">
              Construindo uma aplicação integrada com a plataforma do Google.
            </p>
          </div>
          <img
            src="./img/Angula.svg"
            alt="Algular imagem"
            class="descricao__imagem"
          />
        </div>
        <div class="card__botoes">
          <ul class="botoes">
            <li class="botoes-itens">
              <img src="./img/Favoritos.svg" alt="Favoritar livro" />
            </li>
            <li class="botoes-itens">
              <img src="./img/Compras.svg" alt="Comprar livro" />
            </li>
          </ul>
          <a href="#" class="botoes_ancora">Saiba mais</a>
        </div>
      </div>
    </section>

    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    <section class="carrossel">
      <h2 class="carrossel__titulo">Mais vendidos</h2>
      <!-- Slider main container -->
      <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide">
            <img src="./img/ReactNative.svg" alt="Im1" />
          </div>
          <div class="swiper-slide"><img src="./img/UX.svg" alt="Im2" /></div>
          <div class="swiper-slide">
            <img src="./img/Angular.svg" alt="Im3" />
          </div>
          <div class="swiper-slide">
            <img src="./img/Angular.svg" alt="Im3" />
          </div>
          <div class="swiper-slide">
            <img src="./img/Guia Front-end.svg" alt="Im4" />
          </div>
          <div class="swiper-slide">
            <img src="./img/Portugol.svg" alt="Im5" />
          </div>
          <div class="swiper-slide">
            <img src="./img/Nodejs.svg" alt="Im6" />
          </div>
          ...
        </div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>

      <div class="card">
        <div class="card__descricao">
          <div class="descricao">
            <img src="./img/Estrelinhas.svg" alt="Estrelinhas" />
            <h3 class="descricao__titulo">Autora do mês</h3>
            <h2 class="descricao__titulo-livro">Juliana Agarikov</h2>
            <p class="descricao__texto">
              Analista de sistemas e escritora, Juliana é especialista em
              Front-End.
            </p>
          </div>
          <img
            src="./img/Escritora.svg"
            alt="Juliana Agarikov escritora"
            class="descricao__imagem"
          />
        </div>
        <div class="card__botoes">
          <ul class="botoes">
            <li class="botoes-itens">
              <img src="./img/Favoritos.svg" alt="Favoritar livro" />
            </li>
            <li class="botoes-itens">
              <img src="./img/Compras.svg" alt="Comprar livro" />
            </li>
          </ul>
          <a href="#" class="botoes_ancora">Saiba mais</a>
        </div>
      </div>
    </section>

    <script>
      // Adicione o script do Swiper dentro da tag <script>
      const swiper = new Swiper(".swiper", {
        spaceBetween: 10,
        slidesPerView: 3,
        pagination: {
          el: ".swiper-pagination",
          type: "bullets",
        },
      });
    </script>
  </body>
</html>

Olá Fernanda! Tudo ok contigo?

Eu dei uma olhada aqui e percebi o que aconteceu. Foi o seguinte, você colocou o titulo abaixo da div dos bullets, e isso não deve ser assim, ela deve fica acima, no seu código está assim:

<!-- If we need pagination -->
    <div class="swiper-pagination"></div> <!-- Isso deveria estar dentro da `section` -->
    <section class="carrossel">
      <h2 class="carrossel__titulo">Mais vendidos</h2> <!-- Essa linha deveria estar acima da div se `pagination` -->
      <!-- Slider main container -->
      <div class="swiper">
          <!-- Resto do código de slides -->
    </div>
    <!-- Resto do códigos das outras `divs` -->
</section>

No final devemos ter isso:

<section class="carrossel">
    <h2 class="carrossel__titulo">Mais vendidos</h2> <!-- Ele deve ficar aqui -->
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div> <!-- E isso deve ficar aqui -->
      <!-- Slider main container -->
      <div class="swiper">
          <!-- Resto do código dos slides -->
      </div>
    <!-- Resto do códigos das outras `divs` -->
</section>

Era isso, com isso as coisas devem se arrumar.

Se precisar eu estarei por aqui!

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓