I want to change the color of the left and right buttons on my carousel. I tryed with background color, but doesnt work. How do i change it?
here is my carousel code:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/html_brand.jpg" class="img-responsive"></a></div>
<div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/css_brand.jpg" class="img-responsive"></a></div>
<div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/js_brand.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/jq_brand.jpg" class="img-responsive"></a></div>
<div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/json_brand.jpg" class="img-responsive"></a></div>
<div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/wp_brand.jpg" class="img-responsive"></a></div>
</div>
</div>
<!-- Controls-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Change color property of this selector:
.carousel-control {
color: #bada55;
}
Default arrows are glyphicons which is text based icons. Change their color
property.
For example
.glyphicon.glyphicon-chevron-right{
color:red;
}
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