Bootstrap carousel键盘导航时数字指示器不自动更新如何解决

问题原因 #

你的代码存在两个核心问题：

1. 指示器元素重复定义class属性，导致Bootstrap原生的指示器同步逻辑无法识别正确的激活状态元素，你写的active默认类也不会生效
2. 手动调用carousel('next')/carousel('prev')后没有同步指示器的激活状态，可通过监听Bootstrap Carousel自带的切换完成事件实现自动同步

修复步骤 #

第一步：修复指示器HTML代码 #

合并重复的class属性，修改后的指示器代码如下：

<?php if ( have_rows( 'galerie_de_photo' ) ) : ?>
<ol class="carousel-indicators desktopnumber">
<?php
$count = 0;
while ( have_rows('galerie_de_photo') ) : the_row();    
?>
<li class="single-project-carousel-indicator-item <?php if ($count == 0) { ?>active<?php } ?>" data-target="#testslide" data-slide-to="<?php echo $count; ?>"><?php echo $count + 1; ?></li>
<?php
$count++;
endwhile;
?>
</ol>
<?php endif; ?>

第二步：新增轮播切换事件监听实现状态同步 #

在原有键盘导航JS基础上，新增Carousel的slid.bs.carousel事件监听，该事件会在轮播切换动画完成后触发，可在回调里同步指示器的激活状态。另外建议把已经被jQuery废弃的bind方法替换为on方法，兼容性更好。

完整JS代码如下：

// 优化后的键盘导航逻辑
$(document).on('keyup', function(e) {
    if(e.which == 39){
        $('#testslide').carousel('next');
    }
    else if(e.which == 37){
        $('#testslide').carousel('prev');
    }
});

// 新增指示器同步逻辑
$('#testslide').on('slid.bs.carousel', function (e) {
    // 获取当前激活的轮播项索引
    const currentIndex = $(e.relatedTarget).index();
    // 移除所有指示器的激活状态
    $('.carousel-indicators .single-project-carousel-indicator-item').removeClass('active');
    // 给对应索引的指示器添加激活状态
    $('.carousel-indicators .single-project-carousel-indicator-item').eq(currentIndex).addClass('active');
});

修复完成后，不管是点击切换、自动轮播还是键盘控制切换，指示器都会自动同步激活状态。

内容的提问来源于stack exchange，提问作者microb14