2
respostas

[Sugestão] Deixar a página mais fiel ao protótipo!

Olá PessoALL!

No protótipo, a paginação está na cor gradiente. Mas o plugin importado traz uma cor de azul diferente.

Imagem do protótipo:

Sessão do protótipo "Últimos Lançamentos"

Imagem da página construída:

Página em desenvolvimento

Infelizmente, na documentação, em uma breve pesquisa não foi possível encontrar sobre a estilização das cores. Mas achei uma solução bem simples.

Em uma experiência, tentei colocar a variável já setada com a cor gradiente já utilizada antes, mas o bullet sumiu. Então usei a cor solida, a primeira cor do gradiente: #002F52;

Na aba carrossel.css adicionem logo abaixo de .swiper-pagination a seguinte classe:

.swiper-pagination-bullet-active {
    background-color: #002F52 !important;
}

Com este código, nossa página irá ficar da seguinte maneira:

Página após alteração

Assim, nossa página ficou fiel ao protótipo. Espero que gostem!

2 respostas

Olá Mateus, tudo bem com você?

Com certeza a comunidade não só gostará, mas, utilizará a sua solução. Obrigado pelo detalhamento de códigos e imagens e por dispor do seu tempo para contribuir com a comunidade Alura.

Conte com o apoio do Fórum na sua jornada. Abraços e bons estudos!

E uma forma de deixar o swipper com um livro centralizado e dois aparecendo apenas a metade como no protótipo, é no script do swiper adicionado no index html as configurações serem:

            spaceBetween: 10,
            slidesPerView: 2,
            centeredSlides: true

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software