5
respostas

Carrossel não funciona e o bullets não está aparecendo

Não consigo enxergar meu erro no codigo... ele se encontra assim: HTML

<section class=”carrossel”>
    <h2 class="carrossel__titulo">Novos lançamentos</h2>
    <!-- Slider main container -->
    <div class="swiper-pagination"></div> <!-- mover essa linha-->
    <div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
    <!-- slides -->
    <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="livro-gruia-front-end"></div>
    <div class="swiper-slide"><img src="img/Javascript.svg" alt="livro-javascript"></div>
    <div class="swiper-slide"><img src="img/Portugol.svg" alt="livro-portugol"></div>
    <div class="swiper-slide"><img src="img/Nodejs.svg" alt="livro-nodejs"></div>
    <div class="swiper-slide"><img src="img/UX.svg" alt="livro-ux-svg"></div>
    <div class="swiper-slide"><img src="img/Arquitetura.svg" alt="livro-arquitetura"></div>
    
    </div>
    <!-- If we need pagination -->
    

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

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

    <div class="card">
        <!-- 1º linha -->
        <div class="card__descricao">
            <!-- 1º coluna -->
            <div class="descricao">
                <img src="img/Estrelinhas.svg" alt="Avaliação 5 estrelas">
                <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>
            <!-- 2º coluna -->
            <img src="img/Perfilescritora.svg" class="descricao__imagem">
        </div>

        <!-- 2º linha -->
        <div class="card__botoes">
            <!-- 1º coluna -->
            <ul class="botoes">
                <li class="botoes__item"><img src="img/Favoritos.svg" alt="Favoritar livro"></li>
                <li class="botoes__item"><img src="img/Compras.svg" alt="Adicionar no carrinho de compras"></li>
            </ul>
            <!-- 2º coluna -->
            <a href="#" class="botoes__ancora">Saiba mais</a>
        </div>
    </div>

</section>
5 respostas

Oi, Jardel

<div class="swiper-pagination"></div> <!-- mover essa linha-->

Linha movida

<section class=”carrossel”>
    <h2 class="carrossel__titulo">Novos lançamentos</h2>
    <!-- Slider main container -->
    
    <div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
    <!-- slides -->
    <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="livro-gruia-front-end"></div>
    <div class="swiper-slide"><img src="img/Javascript.svg" alt="livro-javascript"></div>
    <div class="swiper-slide"><img src="img/Portugol.svg" alt="livro-portugol"></div>
    <div class="swiper-slide"><img src="img/Nodejs.svg" alt="livro-nodejs"></div>
    <div class="swiper-slide"><img src="img/UX.svg" alt="livro-ux-svg"></div>
    <div class="swiper-slide"><img src="img/Arquitetura.svg" alt="livro-arquitetura"></div>
    
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div> <!-- linha movida-->

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

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

    <div class="card">
        <!-- 1º linha -->
        <div class="card__descricao">
            <!-- 1º coluna -->
            <div class="descricao">
                <img src="img/Estrelinhas.svg" alt="Avaliação 5 estrelas">
                <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>
            <!-- 2º coluna -->
            <img src="img/Perfilescritora.svg" class="descricao__imagem">
        </div>

        <!-- 2º linha -->
        <div class="card__botoes">
            <!-- 1º coluna -->
            <ul class="botoes">
                <li class="botoes__item"><img src="img/Favoritos.svg" alt="Favoritar livro"></li>
                <li class="botoes__item"><img src="img/Compras.svg" alt="Adicionar no carrinho de compras"></li>
            </ul>
            <!-- 2º coluna -->
            <a href="#" class="botoes__ancora">Saiba mais</a>
        </div>
    </div>

</section>

Eu copiei e colei o código, mas nao mudou nada.

Novos lançamentos

<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- slides -->
<div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="livro-gruia-front-end"></div>
<div class="swiper-slide"><img src="img/Javascript.svg" alt="livro-javascript"></div>
<div class="swiper-slide"><img src="img/Portugol.svg" alt="livro-portugol"></div>
<div class="swiper-slide"><img src="img/Nodejs.svg" alt="livro-nodejs"></div>
<div class="swiper-slide"><img src="img/UX.svg" alt="livro-ux-svg"></div>
<div class="swiper-slide"><img src="img/Arquitetura.svg" alt="livro-arquitetura"></div>

</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div> <!-- linha movida-->

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

<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
<div class="card">
    <!-- 1º linha -->
    <div class="card__descricao">
        <!-- 1º coluna -->
        <div class="descricao">
            <img src="img/Estrelinhas.svg" alt="Avaliação 5 estrelas">
            <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>
        <!-- 2º coluna -->
        <img src="img/Perfilescritora.svg" class="descricao__imagem">
    </div>

    <!-- 2º linha -->
    <div class="card__botoes">
        <!-- 1º coluna -->
        <ul class="botoes">
            <li class="botoes__item"><img src="img/Favoritos.svg" alt="Favoritar livro"></li>
            <li class="botoes__item"><img src="img/Compras.svg" alt="Adicionar no carrinho de compras"></li>
        </ul>
        <!-- 2º coluna -->
        <a href="#" class="botoes__ancora">Saiba mais</a>
    </div>
</div>

Jardel,

Coloque o código completo

Insira Navigation arrows no script


const swiper = new Swiper('.swiper', {
    spaceBetween: 10,
    slidesPerView: 3,
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
    },
    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },  
});