引导轮播编号活动图标答案

【问题标题】：Bootstrap Carousel Number active icon引导轮播编号活动图标
【发布时间】：2012-05-08 13:02:35
【问题描述】：

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

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

【问题讨论】：

1 up，谢谢。

【解决方案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');
});

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

【讨论】：

非常感谢丹。很棒的代码并且不占用太多空间，并且可以应用于多个滑块。 +1！！！

【解决方案2】：

您需要绑定轮播的“滑动”事件。更多细节在这里 --> How to attach "slide" & "slid" events to the Bootstrap toolkit's carousel?

【讨论】：