{Dúvida} Swiper-pagination,swiper-button-prev e next não funcionam/ Problemas com as setas de navegação e as bolinhas de paginação | Front-end

Olá pessoal, estou com dificuldade para remover as setas de navegação e mudar as bolinhas dos slides de posição, vou colocar meu código abaixo junto com os comandos que não estão tendo resultados no css: Index.html. Alguém poderia me ajudar?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>AluraBooks</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
        <link rel="stylesheet" href="styles.css">
   
    <section class="banner">
        <h2 class="banner__titulo">Já sabe por onde começar?</h2>
        <p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
        <input type="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?">
    </section>
    <section class="carrossel">
        <h2 class="carrossel__titulo">Novos lançamentos</h2>
        <!-- Slider main container -->

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

    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro sobre kafka e spring boot da alura books"></div>
      <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro sobre liderança em design da alura books"></div>
      <div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre javascript assertivo da alura books"></div>
      <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro Guia front end"></div>
      <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre portugol"></div> 
      <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro sobre Acessibilidade"></div>
    </div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
    </section>
    <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>
     
</body>

</html>

Código CSS

    .carrossel__titulo {
    color: var(--laranja);
    background-color: var(--branco);
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    padding: 1em 0 0.5em 0;
}
    
.swiper-slide img {
    width: 100%;
}
    
.swiper-button-prev, .swiper-button-next { 
    display: none;
 }
    
.swiper-pagination {
    position: initial;
}

Olá Rodrigo!

Para remover as setas de navegação, o seu CSS parece estar correto. Você usou o display: none; para as classes .swiper-button-prev e .swiper-button-next, o que funcionou aqui pra mim. Certifique-se de que não há outro CSS sobrescrevendo essa regra. Uma boa prática é inspecionar os elementos no navegador para ver se a regra está sendo aplicada corretamente.

Quanto à mudança de posição das bolinhas de paginação, basta você mudar a div que contem elas, ao final do carrosel, as bolinha vão ficar na parte de baixo do carrosel:

<section class="carrossel">
        <h2 class="carrossel__titulo">Novos lançamentos</h2>
        <!-- Slider main container -->

        <div class="swiper">
            <!-- Additional required wrapper -->
            <!-- If we need pagination -->
            


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

            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="img/ApacheKafka.svg"
                        alt="Livro sobre kafka e spring boot da alura books"></div>
                <div class="swiper-slide"><img src="img/Liderança.svg"
                        alt="Livro sobre liderança em design da alura books"></div>
                <div class="swiper-slide"><img src="img/Javascript.svg"
                        alt="Livro sobre javascript assertivo da alura books"></div>
                <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro Guia front end"></div>
                <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre portugol"></div>
                <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro sobre Acessibilidade"></div>
            </div>

            <!-- If we need scrollbar -->
            <div class="swiper-scrollbar"></div>
            <div class="swiper-pagination"></div>  <!-- Essa Linha-->
    </section>

Além disso, certifique-se de que o Swiper está sendo inicializado corretamente no seu JavaScript e que não há erros no console do navegador que possam estar afetando o comportamento do Swiper.

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!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Chegou a hora de transformar