Menu
I'm obviously missing something stupidly simple here. I have images with a white background so I want to be able to edit the arrows on the Bootstraps Carousel so they are visible. So many changing the color of the arrows (NOT the background like I've done).
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; } Carousel HTML
<div class = 'col-md-9'> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="carousel/Bars%20and%20Dots.jpg" alt="First slide" class = 'img-responsive'> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="carousel/murial.jpg" alt="Second slide" class = 'img-responsive'> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="carousel/Upper%20Partialism%20album%20covers004white.jpg" alt="Third slide" class = 'img-responsive'> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" 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" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> 
827
We have to just change the fill color of the SVG shapes used as background images. We can do this by changing the fill value here: “fill='%23c593d8′“.
You can change the color of slider arrows by adding a class and changing the font color (because it's a font icon). It is not possible though to change the colors of the arrows for individual slides.
You just need to override two properties ( width and height ) and add a new one, border-radius , to . carousel-indicators li . Make width and height values equal eg: 10px each and give a border-radius of 100% .
I know this is an older post, but it helped me out. I've also found that for bootstrap v4 you can also change the arrow color by overriding the controls like this:
.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") !important; } .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") !important; } Where you change fill='%23fff' the fff at the end to any hexadecimal value that you want. For example:
fill='%23000' for black, fill='%23ff0000' for red and so on. Just a note, I haven't tested this without the !important declaration.
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
