具有分页功能的自举轮播-使用轮播控件时，当前幻灯片在导航中不活动

Question

I made a carousel that uses pagination as navigation instead of the dots.

When you navigate using the page numbers, it works fine and the active class is added. When you navigate using the controls (left and right), it goes to the next/prev page correctly, but the active class in the navigation doesn't change.

The page in question is here

It's from this jsfiddle using the code below: http://jsfiddle.net/juddlyon/Q2TYv/10/

As far as I can tell, I followed the example from the jsfiddle. What went wrong?

// invoke the carousel
$('#myCarousel').carousel({
interval: false
});

/* SLIDE ON CLICK */ 

$('.carousel-linked-nav > li > a').click(function() {

// grab href, remove pound sign, convert to number
var item = Number($(this).attr('href').substring(1));

// slide to number -1 (account for zero indexing)
$('#myCarousel').carousel(item - 1);

// remove current active class
$('.carousel-linked-nav .active').removeClass('active');

// add active class to just clicked on item
$(this).parent().addClass('active');

// don't follow the link
return false;
});

/* AUTOPLAY NAV HIGHLIGHT */

// bind 'slid' function
$('#myCarousel').bind('slid', function() {

// remove active class
$('.carousel-linked-nav .active').removeClass('active');

// get index of currently active item
var idx = $('#myCarousel .item.active').index();

// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');

});

Answer 1

You are using a newer version of bootstrap then in the example used. The event slid is renamed to slid.bs.carousel .

So binding to the new event will work for you.

$('#myCarousel').bind('slid.bs.carousel', function() {

    // remove active class
    $('.carousel-linked-nav .active').removeClass('active');

    // get index of currently active item
    var idx = $('#myCarousel .item.active').index();

    // select currently active item and add active class
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');

});

The corresponding link to the bootstrap docs: http://getbootstrap.com/javascript/#carousel-events