I want to change img-circle
background color when it is active.
<div id="myCarousel" class="carousel slide">
<div class="carousel-buttons">
<div class="col-sm-4 text-center">
<a class="text-center " data-target="#myCarousel" data-slide-to="0" href="#">
<div class="img-circle center-block">
<img class="carousel-icons-img" src="image/icon-1-student.svg" >
</div>
</a>
</div>
Probably the easiest way to do this without Javascript is to modify your markup to use the standard classes. Then you can just use the active class that gets automatically appended to the immediate child elements of the element with the .carousel-indicators
class.
In the demo, I override the standard Bootstrap CSS and take advantage of the active class that is appended to the .carousel-indicators child elements by the bootstrap.js via some custom css:
.carousel-indicators li {
display: inline-block;
width: 48px;
height: 48px;
margin: 10px;
text-indent: 0;
cursor: pointer;
border: none;
border-radius: 50%;
background-color: #0000ff;
box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5);
}
.carousel-indicators .active {
width: 48px;
height: 48px;
margin: 10px;
background-color: #ffff99;
}
If you can rework your content into the standard classes, you can always overwrite the css or customize it with LESS. You didn't post your custom css or indicate if you're using a version of Bootstrap 2 or 3 so, I couldn't provide more on point example. The markup in the demo is using version 3.2.0.
You can also do this with Javascript via the carousel events. Again, this example is based on Bootstrap 3.2.0. It will not work with version 2, as the event names changed.
In this example, you listen for the slid.bs.carousel
event. This fires as soon as the carousel is about to slide, so to get the next active slide, you have to use the event.relatedTarget. Then to find the corresponding indicator, you can use the index of the next active slide to get the carousel indicator with the matching value in the data-slide-to attribute.
//Make sure to change the id to your carousel id
$('#carousel-example-generic').on('slid.bs.carousel', function (event) {
var nextactiveslide = $(event.relatedTarget).index();
var $btns = $('.carousel-buttons');
var $active = $btns.find("[data-slide-to='" + nextactiveslide + "']");
$btns.find('.img-circle').removeClass('active');
$active.find('.img-circle').addClass('active');
});
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