带分页的引导旋转木马-当使用旋转木马控件时，当前幻灯片在导航中不活动

Bootstrap carousel with pagination - current slide not active in navigation when using carousel control

本文关键字：旋转木马 幻灯片 不活动 导航 分页 控件      更新时间：2023-09-26

我做了一个carousel，用分页代替圆点作为导航。

当您使用页码进行导航时，它工作得很好，并且添加了活动类。当你使用控件(左或右)导航时，它会正确地转到下一个/前页，但是导航中的活动类不会改变。

有问题的页面在这里

它来自这个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');
});

您使用的是较新的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

相关文章：