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

[Sugestão] Dicas para o carrossel de imagens

Na documentação da biblioteca lista algumas propriedades que podem ser usadas para controlar de forma mais fácil o itens do carrossel. Coloque-as no seletor :root do aquivos styles css, junto das outras variáveis:

  • --swiper-navigation-size -----------> Define o tamanho das setas
  • --swiper-pagination-bullet-size -> Define o tamanho dos círculos que indicam a paginação
  • --swiper-pagination-color --------> Define a cor do círculo ativo da paginação

As setas aindam podem ser estilizadas para ficarem iguais ao do figma usando background, padding e border-radius:

.swiper-button-prev, .swiper-button-next {
        display: flex;
        top: 55%;
        height: 48px;
        width: 48px;

        color: var(--branco);
        border-radius: 3em;
        padding: .3em;
        background: var(--azul-degrade);
    }

Veja mais no repositório do meu projeto.

1 resposta
solução!

Oi Samuel, tudo bem?

Muito obrigada por compartilhar essas dicas para o carrossel de imagens. Realmente, é importante ter um controle fácil e eficiente dos itens do carrossel. Além disso, a estilização das setas é um detalhe que pode fazer toda a diferença no visual do carrossel.

Continue firme nos estudos.

Um abraço.