Estoy, obviamente, le falta algo estúpidamente simple aquí. Tengo imágenes con un fondo blanco, por lo tanto, quiero ser capaz de editar las flechas en el Mismo Carrusel de manera que sean visibles. Tantas cambiar el color de las flechas (NO el fondo, como yo he hecho).

CSS

.carousel-control-prev-icon, .carousel-control-next-icon {
    height: 100px;
    width: 100px;
    outline: black;
    background-color: rgba(0, 0, 0, 0.3);
    background-size: 100%, 100%;
    border-radius: 50%;
    border: 1px solid black;
}

Carrusel HTML

Puedes dar algún ejemplo en JSFiddle?

OriginalEl autor Paul Young | 2017-09-16

8 Comentarios

  1. 61

    Sé que este es un post anterior, pero me ha ayudado. También he encontrado que para el bootstrap v4 usted puede también cambiar el color de la flecha por razones imperiosas de los controles como este:

    Donde puede cambiar fill='%23fff' la fff en la final a cualquier valor hexadecimal que desea. Por ejemplo:

    fill='%23000' para el negro, fill='%23ff0000' de rojo y así sucesivamente. Sólo una nota, yo no he probado esta sin el !importante declaración.

    Esta es la respuesta correcta.
    %23 es la dirección URL codificada equivalente a ‘#’

    OriginalEl autor Frank A.

  2. 15

    Si lo que desea es hacer de negro en Bootstrap 4.

    Más limpio, más fácil. Yo personalmente odio el BS4 este trabajo y sus background-image: svg... solución.
    Esta es la única solución que funciona para BS4
    buen truco, funciona bien!!!

    OriginalEl autor Chris Gunawardena

  3. 4

    Debe utilizar también: <span><i class="fa fa-angle-left" aria-hidden="true"></i></span> el uso de fontawesome. Usted tiene que sobrescribir el código original. Hacer lo siguiente, y serás libre de personalizar en CSS:


    El código original

    OriginalEl autor Unison Tek

  4. 3

    Actualmente Bootstrap 4 utiliza una imagen de fondo con embbed SVG datos que incluyen el color de la SVG forma. Algo así como:

    Nota de la parte de fill='%23fff' llena la forma con un color, en este caso #fff (blanco), rojo simplemente reemplazar con #f00

    Finalmente, es seguro para incluir este (mismo cambio para la siguiente icono):

    OriginalEl autor JDuarteDJ

  5. 2

    para el bootstrap-3 se puede utilizar:

    Gracias por la sugerencia, pero estoy usando Bootstrap 4.

    OriginalEl autor Keshav Bhadouria

  6. 1

    Si usted está usando bootstrap.min.css para el carrusel-

    Abrir el bootstrap.min.archivo css y encontrar la propiedad «glyphicon-chevron-derecha» y añadir la propiedad «color:red»

    OriginalEl autor PADMAJA SONWANE

Dejar respuesta

Please enter your comment!
Please enter your name here