31.12.2024

Como Mudar as Cores das Setas no Carousel do Bootstrap: Uma Solução em CSS

Resposta Rápida

Para mudar a cor das setas no slider do Bootstrap para vermelho, você deve personalizar os seletores CSS .carousel-control-prev-icon e .carousel-control-next-icon usando a propriedade filter. Abaixo está um exemplo de CSS para alterar as setas para vermelho:

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: brightness(0) invert(1) contrast(10.5) sepia(1) hue-rotate(345deg);
}

A propriedade filter com o valor hue-rotate(345deg) ajuda a alcançar uma tonalidade vermelha; ajuste o ângulo de rotação para outras cores. Basta adicionar esse código ao seu CSS e ajustá-lo de acordo com suas preferências.

Explorando e Personalizando os Controles

As opções de personalização para as setas do slider vão além de apenas alterar sua cor. As abordagens a seguir podem ajudar a tornar as setas mais expressivas e integrá-las perfeitamente ao design do seu site:

• Aumentar o tamanho das setas para melhor visibilidade:

.carousel-control-prev-icon,
.carousel-control-next-icon {
  font-size: 2rem;
}

• Usar a propriedade content com texto ou imagens para criar setas:

.carousel-control-prev-icon {
  content: url('left-arrow.svg');
}
.carousel-control-next-icon {
  content: url('right-arrow.svg');
}

• Adicionar um fundo para melhorar o contraste dos ícones:

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #000;
  border-radius: 50%;
  padding: .5rem;
}

Visualização

Suas setas do slider agora parecem assim:

Antes: 💡➡️   🎠   ⬅️💡   // Elas estão mal visíveis agora.
Quando Pintadas: 💡🖌️➡️   🎠   ⬅️🖌️💡   // Acendemos a luz, hora de pintar!
Depois: 🔴➡️   🎠   ⬅️🔴   // E voilà! Elas se transformaram em um novo visual!

Agora, graças aos ajustes no CSS, nossas setas estão mais brilhantes!

Ajustando Cores

Em vez de usar filtros, considere usar elementos SVG para os controles do slider. O atributo fill permite especificar a cor exata:

.carousel-control-prev-icon {
  background-image: url('data:image/svg+xml;utf8,<svg ...><path fill="%23FF0000" .../></svg>');
}
.carousel-control-next-icon {
  background-image: url('data:image/svg+xml;utf8,<svg ...><path fill="%23FF0000" .../></svg>');
}

Substitua %23FF0000 pela cor desejada no formato hexadecimal.

Adicionando Ícones Font Awesome

Os ícones do Font Awesome são perfeitos para adicionar sofisticação ao design desses elementos de controle:

<a class="carousel-control-prev" href="#seuCarousel" role="button" data-slide="prev">
  <span class="fa fa-angle-left" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#seuCarousel" role="button" data-slide="next">
  <span class="fa fa-angle-right" aria-hidden="true"></span>
</a>

Defina cores e tamanhos personalizados para eles usando CSS na classe .fa:

.fa-angle-left,
.fa-angle-right {
  color: #FF5733;
  font-size: 2rem;
}

Conclusão: Dicas Úteis para uma Abordagem Responsiva

Defina um fundo contrastante para os controles do slider usando a classe .carousel-dark no Bootstrap 5:

<div id="seuCarousel" class="carousel slide carousel-dark" data-ride="carousel">

Certifique-se de que as setas estejam visíveis em cada um dos slides do slider. Isso ajudará a evitar frustrações desnecessárias para o usuário.

Recursos Úteis

1. Carousel · Bootstrap — Documentação oficial do Bootstrap sobre como trabalhar com sliders.
2. Bootstrap Carousel — Guia abrangente do W3Schools sobre o uso avançado de sliders do Bootstrap.
3. Encontrar Ícones que Atendam Perfeitamente às suas Necessidades | Font Awesome — Uma coleção de ícones de setas do Font Awesome para personalização.
4. Bootstrap Themes · Bootstrap — Personalizando componentes do Bootstrap através do Sass.
5. Codeply v2 — Um slider protótipo com setas personalizáveis.

Video

Navigation