Saltar al contenido

Cambiar los colores de control del carrusel de Bootstrap 4

Hola usuario de nuestra página web, hallamos la respuesta a lo que buscabas, has scroll y la encontrarás un poco más abajo.

Solución:

No hay necesidad de hacks CSS innecesarios.

Si desea modificar cualquier CSS de Bootstrap (o los colores de control del carrusel en particular), puede hacerlo fácilmente.

Estas son las reglas que controlan el color de los controles del carrusel:

.carousel-control-prev-icon 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");


.carousel-control-next-icon 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");

Reemplace la fff en el fill='%23fff' partes con el código hexadecimal del color deseado.

Aquí hay un fragmento de código de trabajo donde fill='%23fff' ha sido reemplazado por fill='%23f00' para rojo en lugar de blanco:






    


Simplemente inserte su propio ícono dentro del carousel-control-next & carousel-control-prev clase. Por ejemplo, quiero cambiar el ícono anterior y siguiente con Fuente impresionante iconos Puedo hacer esto:


  
  
  Previous



  
  
  Next

Espero que resuelva tu problema

Nos encantaría que puedieras comunicar este tutorial si te ayudó.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *