Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Pagination do SwiperJS não está ficando centralizado

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

por Thiago Alves Ballalai de Carvalho
| 42k xp | 9 posts

Olá,

Segui a aula até a conclusão da section de classe carrossel mas ao comparar com o figma eu percebi que as imagens do carrossel ficaram muito pequenas, tentei aumentar o tamanho delas através do código no carrossel.css:

.swiper {
width: 600px;
height: 300px;
}

Esta alteração faz com que o pagination deixa de ficar centralizado pois os bulletpoint do pagination estão associados a segunda imagem ativa do carrossel conforme imagem abaixo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Estou buscando alguma solução na documentação mas não estou conseguindo centralizar os bulletpoints ao aumentar o tamanho das imagens.

1 resposta
por Renan Cezar Wuicik
| 2976k xp | 6107 posts
Instrutor Suporte Educacional Start By Alura

Olá Thiago! Tudo ok contigo?

Eu vou pedir que compartilhe seu código no Github ou Drive e mande o link para eu testar por aqui e lhe ajudar de forma mais assertiva.

Ademais, pelo que pude perceber, dada as informações compartilhadas, no seu caso uma solução seria procurar o elemento que possui o pagination e centralizar ele usando algumas alternativas como, por exemplo, FlexBox, Grid, ou o margin 1rem auto no elemento pai para centralizar. Você pode usar essa ou outras soluções que você encontrar.

Outro detalhe, o que pode ter atrapalhado também foi o fato de você ter alterado as propriedades de largura e altura dos itens, e isso pode ter atrapalhado, uma vez que o Swiper tem vários estilos próprios que podem atrapalhar e muito o seu trabalho, e é por isso que é recomendado que você coloque a chamada dos seus estilos depois da chamada de estilos do Swiper, fazendo isso fica mais fácil sobrescrever os estilos do Swiper.

Era isso. Se precisar eu estarei por aqui!

Abraços e bpns estudos.