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

[Dúvida] Setas do carrossel

Referente ao curso HTML e CSS: responsividade com mobile-first

por Laís Azevedo Freitas
| 44.7k xp | 9 posts

Eu gostaria que as setas do carrossel fossem clicáveis e não precisasse rolar (exceto na versão mobile obvio). Procurando no fórum achei uma pessoa que tbm qria isso e pediu ajuda. O código que compartilharam foi esse:

<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: 'fraction',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>

Mas ao colocar ele a paginação saiu das bolinhas para números. Existe maneira de deixar os dois?

Paginação do carrossel com números

Paginação do carrossel com bolinhas

2 respostas
solução!
por Victor Costa Santos
| 2011.6k xp | 3934 posts
Alura Scuba Team Monitor de ForumOps

Olá Láis!

Para isso basta você colocar em type, que no caso é o tipo de paginação de bullets no lugar de fraction, ficando assim o código:

<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',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    </script>

Espero ter ajudado e 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!
por Laís Azevedo Freitas
| 44.7k xp | 9 posts

Deu certo muito obrigada!