1

Tengo un carresul con imágenes en mi sitio web. En dicho carrusel quiero cambiar/personalizar el color de las flechas (para destaque o se visualice correctamente sobre las imágenes -tienen fondo blanco y previous/next por defecto, incorporan el color blanco-).

En Bootstrap, he añadido text-danger para que las pueda repintar a rojas pero siguen en blanco.

¿Cómo podría resolverlo?

Código:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/img1.jpg" class="d-block w-100" alt="..." width="420px" height="350px">
        </div>
        <div class="carousel-item">
            <img src="img/img5.jpg" class="d-block w-100" alt="..." width="420px" height="350px">
        </div>
        <div class="carousel-item">
            <img src="img/img8.jpg" class="d-block w-100" alt="..." width="420px" height="350px">
        </a>
                                    
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" class="text-danger">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" class="text-danger">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

introducir la descripción de la imagen aquí

3
  • 1
    Por cierto, lo del text-danger no está bien puesto. No puedes usar dos veces el atributo class= en un elemento, pues solo se lee el primero. Deberias poner todas las clases en un único atributo class= (aun así tampoco te habria funcionado, porque no es un texto, es una imagen)
    – masterguru
    Commented el 15 mar. 2022 a las 15:17
  • @masterguru Me di cuenta al decirmelo que tenia varios class como atributo dentro de una sentencia, despiste mío. Y gracias por la aclaración. Seguiré el consejo que me diste con la propiedad "filter".
    – omaza1990
    Commented el 15 mar. 2022 a las 15:25
  • He actualizado mi respuesta con un snippet y un enlace a una tool que puede ayudarte a poner correctamente los valores del filter para un color específico. Si mi respuesta soluciona tu pregunta puedes marcarla como aceptada para que la comunidad lo sepa y no quede pendiente eternamente.
    – masterguru
    Commented el 15 mar. 2022 a las 16:14

1 respuesta 1

3

Eso son iconos creados mediante svg/xml, y para modificarlos podrias probar con la propiedad filter:

.carousel-control-prev-icon, .carousel-control-next-icon {
  filter: invert(108%);
}

Eso te los resaltará mejor si el fondo es blanco. De todos modos tienes infinitas opciones con el atributo filter para modificar. Míralas en esta documentación: https://www.w3schools.com/cssref/css3_pr_filter.asp

Si necesitas un color específico puedes probar esta herramienta para generar los valores del filter: https://codepen.io/sosuke/pen/Pjoqqp

Aquí te dejo un snippet de ejemplo para que lo ejecutes y veas que ahora salen más oscuros:

.carousel-control-prev-icon, .carousel-control-next-icon {
  filter: invert(108%);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/img1.jpg" class="d-block w-100" alt="..." width="420px" height="350px">
    </div>
    <div class="carousel-item">
      <img src="img/img5.jpg" class="d-block w-100" alt="..." width="420px" height="350px">
    </div>
    <div class="carousel-item">
      <img src="img/img8.jpg" class="d-block w-100" alt="..." width="420px" height="350px">
    </div>

  </div>
</div>
<a class="carousel-control-prev text-danger" href="#carouselExampleControls" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-danger" href="#carouselExampleControls" role="button" data-slide="next">
  <span class="carousel-control-next-icon " aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.