Quantidade de bullets apresentadas no carrossel | Front-end

3
respostas

por norton klenner sasso

| 18k xp | 2 posts

Bom dia. Estou fazendo o curso "HTML e CSS: responsividade com mobile-first". Neste curso é mostrado como utilizar o SwiperJS. Para praticar criei um projeto e inseri 20 imagens no carrossel. E por consequência apareceram 20 bullets. Fui pesquisar como restringir a quantidade de bullets. Enconteri as propriedades "dynamicBullets" e "dynamicMainBullets". Alterei o código para o mostrado a seguir. pagination: { el: '.swiper-pagination', type: 'bullets', dynamicBullets: true, dynamicMainBullets: 5, },

Com estas 2 propriedades configuradas, os bullets foram deslocados para a esquerda da página e não consigo posicioná-los no centro como é o default quando estas 2 propriedades não são declaradas.

Bullets deslocados para a esquerda da página

Alguém consegue me ajudar? Grato.

3 respostas

por RODRIGO SILVA HARDER

| 1929.3k xp | 4231 posts

Alura Scuba Team Monitor de Fórum Ops

1 semana atrás

Oi, Norton, tudo bem?

Peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Fico no aguardo!

por norton klenner sasso

| 18k xp | 2 posts

1 semana atrás

Bom dia Rodrigo, tudo bem?

Efetuei o upload do projeto neste link.

https://drive.google.com/drive/folders/1RvCKRnaES5mq9rc7KR6Z_BXDJ-EN0Vfq?usp=sharing

Desde já agradeço pela ajuda.

por RODRIGO SILVA HARDER

| 1929.3k xp | 4231 posts

Alura Scuba Team Monitor de Fórum Ops

3 dias atrás

Oi, Norton, tudo bem?

No arquivo "carrossel.css" na classe swiper-pagination, você pode aplicar a propriedade margin-left:50%;.

.swiper-pagination {
    position: initial;
    margin-left:50%;
}

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!