我已经能够实现带有图标的Bootstrap轮播,以表示此示例中的幻灯片1-3：
http://jsfiddle.net/alexmoss/QzVq8/
http://jsfiddle.net/alexmoss/QzVq8/
我注意到默认情况下将“活动”类添加到幻灯片1,然后幻灯片1随着活动幻灯片的更改而更改.我想要做的就是让子弹发生这种情况.我已经使第一个活跃,但是如果幻灯片本身在幻灯片2等上,则希望第二个活跃
解决方法
基本上计算出当前显示的幻灯片的索引,然后使用该索引将“活动”类应用于相应的导航按钮.
$('#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');
});
您可以清楚地优化代码以使用更少的变量.但是,我故意扩展它,以便你了解发生了什么.
