Hello there! I recently created a carousel and carousel navigation system using Bootstrap. I am now trying to figure out how to detect the value of 'data-slide-to' and then apply a specific style to the corresponding navigation item based on that value.
Carousel Navigation
<div class="carouselNav">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<ul>
<li><a class="" href="#featured" role="button" data-slide-to="0">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<h3>Web Design</h3>
</a></li>
<li><a class="" href="#featured" role="button" data-slide-to="1">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<h3>SEO</h3>
</a></li>
<li><a class="" href="#featured" role="button" data-slide-to="2">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<h3>Project Management</h3>
</a></li>
</ul>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
Suggested Javascript (assuming #web is a unique ID assigned to each nav item)
if (data-slide-to.value == 0) {
$('#web').addClass('highlight');
} else {
$('#web').removeClass('highlight');
}
});
Suggested CSS
.highlight {
}
.hightlight::after {
content: ' >';}
In essence, I am aiming for the Navigation to display a '>' arrow after it when the corresponding slide (0,1,2) is active. Any guidance on this matter would be greatly appreciated.