Question

我做了一个旋转木马，使用分页作为导航而不是点。

使用页码导航时，它可以正常工作并添加活动类。当您使用控件（左侧和右侧）导航时，它会正确转到下一个/上一页，但导航中的活动类不会更改。

相关网页为here

使用以下代码来自这个jsfiddle：http://jsfiddle.net/juddlyon/Q2TYv/10/

据我所知，我跟随了jsfiddle的例子。出了什么问题？

// 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

您在使用的示例中使用的是较新版本的bootstrap。事件slid已重命名为slid.bs.carousel。

所以绑定到新事件对你有用。

$('#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');

});

引导文档的相应链接：http://getbootstrap.com/javascript/#carousel-events

带分页的Bootstrap轮播 - 当使用轮播控件时，当前幻灯片在导航中不活动

1 个答案: