Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Bolinhas duplicadas, em cima e em baixo. como corrigir ?

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Carrossel com SwiperJS

por Guilherme da SIlva
| 57.5k xp | 6 posts

Quando fiz o 'position: initial;' as bolinhas subiram, mas ficaram em baixo também.

Meu código html:

ÚLTIMOS LANÇAMENTOS

        <!-- Additional required wrapper -->
         <!-- If we need pagination -->
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide"><img src="seets/ApacheKafka.svg" alt="Livro sobre Apache Kafta"></div>
          <div class="swiper-slide"><img src="seets/Liderança.svg" alt="Livro sobre Liderança"></div>
          <div class="swiper-slide"><img src="seets/Javascript.svg" alt="Livro sobre JS"></div>
          <div class="swiper-slide"><img src="seets/Guia Front-end.svg" alt="Livro sobre Frontend"></div>
          <div class="swiper-slide"><img src="seets/Portugol.svg" alt="Livro sobre Portugol"></div>
          <div class="swiper-slide"><img src="seets/Acessibilidade.svg" alt="Livro sobre Acess"></div>
          ...
        </div>
        <!-- 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>
      
        <!-- If we need scrollbar -->
        <div class="swiper-scrollbar"></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,
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },

    });
  </script>
  
  ![Insira aqui a descrição dessa imagem para ajudar na acessibilidade](https://cdn1.gnarususercontent.com.br/1/1182303/6c52f1d6-1f58-419a-9925-76c653d464c5.png)
2 respostas
solução!
por Victor Costa Santos
| 1757.3k xp | 3382 posts
Alura Scuba Team Monitor de ForumOps

Olá, Guilherme!

Para resolver isso, peço para que remova uma das divs com a classe swiper-pagination. No código a seguir vou deixar apenas a que está no topo:

<section class="carrossel">
    <h2 class="carrossel__titulo">ÚLTIMOS LANÇAMENTOS</h2>
    <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="seets/ApacheKafka.svg" alt="Livro sobre Apache Kafta"></div>
            <div class="swiper-slide"><img src="seets/Liderança.svg" alt="Livro sobre Liderança"></div>
            <div class="swiper-slide"><img src="seets/Javascript.svg" alt="Livro sobre JS"></div>
            <div class="swiper-slide"><img src="seets/Guia Front-end.svg" alt="Livro sobre Frontend"></div>
            <div class="swiper-slide"><img src="seets/Portugol.svg" alt="Livro sobre Portugol"></div>
            <div class="swiper-slide"><img src="seets/Acessibilidade.svg" alt="Livro sobre Acess"></div>
            ...
        </div>
      
        <!-- 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>

Ajuste no CSS:

Se você quiser que a paginação apareça no topo, pode ajustar a posição dela no CSS:

.swiper-pagination {
    position: initial;
    margin: .5em 0;
}

Espero ter ajudado! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Guilherme da SIlva
| 57.5k xp | 6 posts

Nossa, faltou eu fazer uma limpeza no código hahahah Deu certo, muito obrigado !