[Dúvida] "bullets" do meu "swiper-pagination" não esta aparecendo.

Olá Leonardo!

Identifiquei alguns erros em seu código, principalmente na parte das divs que envolvem o carrossel. Os dois carrosséis começaram a invadir um ao outro, gerando uma série de erros. Para evitar problemas futuros, reformulamos seu código seguindo o padrão da aula. Abaixo, segue a primeira parte do código reformulado que envolve os dois carrosseis e os cards:

Parte 1

<SECTION class="carrossel">
        <h2 class="carrossel__titulo">ÚLTIMOS LANÇAMENTOS</h2>
          
        <div class="carrossel__container">
            <div class="swiper">
                <!-- Additional required wrapper -->
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
    
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="assets/ApacheKafka.svg"
                            alt="Livro sobre apache kafka e spring boot da alura books"></div>
                    <div class="swiper-slide"><img src="assets/Liderança.svg"
                            alt="Livro sobre liderança em design da alura books"></div>
                    <div class="swiper-slide"><img src="assets/Javascript.svg"
                            alt="Livro sobre javascript assertivo da alurabooks"></div>
                    <div class="swiper-slide"><img src="assets/Guia Front-end.svg" alt="Livro Guia front end"></div>
                    <div class="swiper-slide"><img src="assets/Portugol.svg" alt="Livro sobre portugol"></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="card__descricao__textos">
                    <h3 class="descricao__titulo">Talvez você também se interesse por...</h3>
                    <h2 class="descricao__livro">Angular 11 e Firebase</h2>
                    <p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
                </div>
                <img src="assets/Angular.svg" alt="imagem do angular">
            </div>
           <div class="botoes">
            <ul class="botoes__icones">
                <li><img src="assets/Favoritos.svg" alt="salvar como favorito"></li>
                <li><img src="assets/Compras.svg" alt="carrinho"></li>
            </ul>
            <a class="botoes-ancora" href="#">Saiba mais</a>
           </div>
        </div>


    </div>
    </SECTION>

Parte 2

<SECTION class="carrossel">
        
        <h2 class="carrossel__titulo">MAIS VENDIDOS</h2>
        
        <div class="carrossel__container">
            <div class="swiper">
                <!-- Additional required wrapper -->
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
    
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="assets/ApacheKafka.svg" alt="img1"></div>
        <div class="swiper-slide"><img src="assets/Guia Front-end.svg" alt="img2"></div>
        <div class="swiper-slide"><img src="assets/Javascript.svg" alt="img3"></div>
        <div class="swiper-slide"><img src="assets/Liderança.svg" alt="img4"></div>
        <div class="swiper-slide"><img src="assets/Portugol.svg" alt="img5"></div>
        </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="card__descricao__textos">
                    <img src="assets/Estrelinhas.svg" alt="estrelas">
                    <h3 class="descricao__titulo">Autora do Mês</h3>
                    <h2 class="descricao__livro">Juliana Agarikov</h2>
                    <p class="descricao__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End. </p>
                </div>
                <img src="assets/Perfil-escritora 1.svg" alt="imagem da Juliana">
            </div>
           <div class="botoes">
            <ul class="botoes__icones">
                <li><img src="assets/Favoritos.svg" alt="salvar como favorito"></li>
                <li><img src="assets/Compras.svg" alt="carrinho"></li>
            </ul>
            <a class="botoes-ancora" href="#">Saiba mais</a>
           </div>
        </div>
    </div>
    </SECTION>

Esses dois código devem ficar entre sua class Banner e Contato.

Após isso, será preciso modificar o seu script, pois algumas classes sofreram alterações devido à atualização.

No final do seu código altere os script para o seguinte código:

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
        });
    </script>

Caso você queira o index.html completo, pode baixá-lo no seguinte link:

• Link do arquivo

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!