Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Ajustes na estilização do carrossel

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Selecionando Media Queries e atividade Lista de exercícios

por Igor Regis de Oliveira
| 56.8k xp | 18 posts

Vi que algumas partes do carrossel ficaram um pouco diferentes do projeto no Figma e fui ler a documentação do SwiperJS, fiz algumas pesquisas no stackoverflow e consegui chegar num resultado mais próximo que gostaria de compartilhar.

carrossel

O CSS completo do carrossel ficou assim:

.carrossel__titulo {
  color: var(--laranja);
  background-color: var(--branco);
  text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
  padding: 1.3em 0 0.6em 0;
}

.swiper-slide img {
  width: 100%;
}

.swiper-button-prev,
.swiper-button-next {
  display: none;
}

.swiper-pagination {
  position: initial;
  margin: 0.5em 0;
}

.swiper-pagination-bullet-active {
  background-color: var(--azul);
}

@media screen and (min-width: 1024px) {
  .carrossel__titulo {
    font-size: 26px;
  }

  .swiper-pagination {
    margin: 2em 0 3em 0;
  }

  .swiper {
    position: relative;
    width: 60%;
  }

  .swiper-button-prev,
  .swiper-button-next {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background-color: var(--azul);
    display: block;
    top: 61%;
    cursor: pointer;
    color: var(--branco);
    background-position: center;
    padding: 8px 16px;
    border-radius: 100%;
    background-repeat: no-repeat;
  }

  .swiper-button-prev {
    background-image: url("/img/setaesquerda.svg");
  }

  .swiper-button-next {
    background-image: url("/img/setadireita.svg");
  }

  .swiper-button-next::after,
  .swiper-button-prev::after {
    content: "";
    display: none;
  }
}

Alterei a cor da bolinha da página ativa e o estilo das setas.

Não cosegui encontrar uma forma de reduzir o tamanho das bolinhas com as setas.

O espaçamento entre as setas eu encontrei uma forma de aumentar, mas elas não apareciam mais quando saiam do container do carrossel, então deixei assim mesmo.

Também notei que no figma as capas laterais não aparecem completamente, apenas a que está no meio, mas não consegui replicar, também. Se alguém souber como fazer o ajuste de alguma forma estou aceitando dicas... haha

1 resposta
solução!
por MARIA ISABEL TEIXEIRA
| 1043.8k xp | 2507 posts
Alura Scuba Team Monitora | Suporte Educacional | AWS & Azure Certified

Oii, Igor, tudo bem por aí?

Antes de tudo, bem legal que você foi atrás da documentação pra fazer o projeto! É isso aí! Obrigada por compartilhar aqui conosco.

Agora, vamos às sugestões!

  • Redução do tamanho das bolinhas da paginação

Para alterar o tamanho das bolinhas da paginação no Swiper, você pode ajustar o height e o width das bolinhas no CSS.

Por exemplo, no CSS seria assim:

.swiper-pagination-bullet {
  width: 10px; /* Reduz o tamanho da largura */
  height: 10px; /* Reduz o tamanho da altura */
  opacity: 0.4; /* Torna as bolinhas menos visíveis quando não estão ativas */
}

.swiper-pagination-bullet-active {
  opacity: 1; /* Torna a bolinha ativa totalmente visível */
}
  • Ajuste da visibilidade das capas laterais

Você pode usar a propriedade scale nos slides não ativos. Isso pode ser feito adicionando um estilo aos slides inativos dentro de seu CSS.

Abaixo, um código como exemplo:

.swiper-slide {
  transition: transform 0.3s;
}

.swiper-slide-active {
  transform: scale(1); /* Mantém o slide ativo no tamanho normal */
}

.swiper-slide-next,
.swiper-slide-prev {
  transform: scale(0.8); /* Reduz o tamanho dos slides adjacentes */
}
  • Sobre as Setas Saindo do Container

Quanto ao problema das setas que desaparecem quando ajustadas para fora do container do carrossel, isso geralmente ocorre porque o container do Swiper tem overflow: hidden; aplicado. Para resolver isso, você pode tentar ajustar o overflow do container para visible ou posicionar as setas fora do container usando posicionamento absoluto em relação a um elemento pai que permita a visibilidade externa.

Se quiser compartilhar mais coisas no fórum, fique à vontade! :)

Abraços!

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