我已经能够实现 Bootstrap 轮播,并带有图标来表示本示例中的幻灯片 1-3: http://jsfiddle.net/alexmoss/QzVq8/
我注意到“active”类默认添加到幻灯片 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');
});
您可以清楚地优化代码以使用更少的变量。不过,我特意对其进行了扩展,以便您了解发生了什么。
关于jquery - Bootstrap 轮播编号事件图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10499154/