Bootstrap Carousel Number活动图标

我已经能够实现带有图标的Bootstrap轮播，以代表本例中的幻灯片1-3： http ： //jsfiddle.net/alexmoss/QzVq8/

我注意到默认情况下将“活动”类添加到幻灯片1，然后幻灯片1随着活动幻灯片的更改而更改。 我想要做的就是让子弹发生这种情况。 我已经使第一个活跃，但如果幻灯片本身在幻灯片2等等，则希望第二个活跃

Answer 1

基本上计算出当前显示的幻灯片的索引，然后使用该索引将“活动”类应用于相应的导航按钮。

$('#myCarousel').bind('slid', function() { // Get currently selected item var item = $('#myCarousel .carousel-inner .item.active'); // Deactivate all nav links $('#carousel-nav a').removeClass('active'); // Index is 1-based, use this to activate the nav link based on slide var index = item.index() + 1; $('#carousel-nav a:nth-child(' + index + ')').addClass('active'); }); 

您可以清楚地优化代码以使用更少的变量。 但是，我故意扩展它，以便你了解发生了什么。

Answer 2

你需要绑定旋转木马的’滑动’事件。 更多细节在这里 – > 如何将“幻灯片”和“滑动”事件附加到Bootstrap工具包的轮播？