3
respostas

Não consigo apresentar a bolinhas para rodar e as setas

  <section class="carrossel">
        <h3 class="carrossel__titulo">Mais vendidos</h3>

        <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="img/ApacheKafka.png" alt="Livro sobre apache kafka e spring boot da alura books"></div>
              <div class="swiper-slide"><img src="img/Liderança.png" alt="Livro sobre liderança em design da alura books"></div>
              <div class="swiper-slide"><img src="img/Javascript.png" alt="Livro sobre javasccript assertivo da alura books"></div>
            </div>

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

            <div class="card">
                <!-- 1º Linha -->
                <div class="card__descrição">
                    <!--1º Coluna -->
                    <div class="descrição">
                        <img src="img/Estrelinhas.png" alt="Imagem de cinco estrelinhas ">
                        <h3 class="descrição__titulo">Autora do mês</h3>
                        <h2 class="descrição__titulo-livro">Juliana Agarikov</h2>
                        <p class="descrição__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End. </p>
                    </div>
                    <!--2º Coluna-->
                    <img src="img/Perfil-escritora 1.png" alt="Imagem da autora">
                </div>

                <!-- 2º Linha -->
                <div class="card__botões">
                    <!-- 1º Coluna -->
                    <ul class="botões">
                        <li class="botões__itens"><img src="img/Favoritos.svg" alt="Favoritar livros"></li>
                        <li class="botões__itens"><img src="img/Compras.svg" alt="Adicionar no carrinho"></li>
                    </ul>

                    <!-- 2º Coluna -->
                    <a href="#" class="botões__ancora">Saiba mais</a>
                </div>
            </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>
3 respostas

O meu tá assim!

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

O modelo certo é assim:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Opa amigo, se possível coloca aqui o código CSS.. no meu estava bem parecido e com o

.swiper-button-prev, .swiper-button-next{
    display: none;
}

resolveu