Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] A seta nao ta sumindo e o pagination nao ta aparecendo

Fala Galera, Entao, eu fiz tudo direitinho, n sei se teve alguma mudança ou se fiz alguma coisa errada, mas a seta nao ta sumindo, só se eu tirar o div do html, mas n consigo usar o display none la no css

    <section class="carrossel">
        <h2 class="carrossel__titulo">ÚLTIMOS LANÇAMENTOS</h2>
        <div class="swiper">
            <div class="swiper-pagination"></div>
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
              <div class="swiper-slide"><img src="./assets/Liderança.svg" alt="foto livro lancamento"></div>
              <div class="swiper-slide"><img src="/assets/Javascript.svg" alt=""></div>
              <div class="swiper-slide"><img src="/assets/Acessibilidade.svg" alt=""></div>
              <div class="swiper-slide"><img src="/assets/Acessibilidade.svg" alt=""></div>
              <div class="swiper-slide"><img src="/assets/ApacheKafka.svg" alt=""></div>
              <div class="swiper-slide"><img src="/assets/Guia Front-end.svg" alt=""></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>
    </section>
.carrossel__titulo{
    color: var(--color-laranja);
    background-color: var(--branco);
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--fonte-principal);
    padding: 1em 0 0.5em 0;
}

.swiper-slide img{
    width: 100%;
}

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

.swiper-pagination {
    position: initial;
}

no site tambem que ela mostrou a documentacao do swiper, a parte do pagination nao ta aparecendo mais, entao nao consigo ver quando uso o mesmo codigo que ela usou, alguem consegue me auxiliar nisso? obrigado!

1 resposta
solução!

Eu consegui resolver usando o metodo inline do css

 <section class="carrossel">
        <h2 class="carrossel__titulo">ÚLTIMOS LANÇAMENTOS</h2>
        <div class="swiper">
             <!-- If we need pagination -->
            <div class="swiper-pagination" style="position: initial;
    margin: .5em 0;"></div>
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
              <div class="swiper-slide"><img src="./assets/Liderança.svg" alt="foto livro lancamento"></div>
              <div class="swiper-slide"><img src="/assets/Javascript.svg" alt=""></div>
              <div class="swiper-slide"><img src="/assets/Acessibilidade.svg" alt=""></div>
              <div class="swiper-slide"><img src="/assets/Acessibilidade.svg" alt=""></div>
              <div class="swiper-slide"><img src="/assets/ApacheKafka.svg" alt=""></div>
              <div class="swiper-slide"><img src="/assets/Guia Front-end.svg" alt=""></div>
              ...
            </div>
            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev" style="display: none"></div>
            <div class="swiper-button-next" style="display:none"></div>
          
            <!-- If we need scrollbar -->
            <div class="swiper-scrollbar"></div>
          </div>
    </section>