Bootstrap 5带进度条轮播图：上一页按钮功能实现求助

问题说明 #

你制作的4张幻灯片Bootstrap 5轮播，下一页按钮能正常更新计数和进度条，但点击上一页时，计数不会递减，进度条宽度也无变化。

问题根源 #

你的onSelect()函数仅执行了clicks -= 1，既未处理clicks变为0时的边界重置，也未更新进度条宽度和页面计数显示，逻辑不完整。

修复代码 #

修改JS代码，抽离公共逻辑避免重复，补全上一页的处理逻辑：

var clicks = 1;
var elem = document.getElementById("myBar");

// 抽离公共函数：更新进度条和计数显示
function updateProgressAndCount() {
    // 根据当前clicks设置进度条宽度
    switch(clicks) {
        case 1:
            elem.style.width = '25%';
            break;
        case 2:
            elem.style.width = '50%';
            break;
        case 3:
            elem.style.width = '75%';
            break;
        case 4:
            elem.style.width = '100%';
            break;
    }
    // 更新页面上的计数
    document.getElementById("testimonial-count").innerHTML = clicks;
}

function onSelect() {
    clicks -= 1;
    // 边界处理：当clicks小于1时，回到最后一张（4）
    if (clicks < 1) {
        clicks = 4;
    }
    // 调用公共函数更新进度条和计数
    updateProgressAndCount();
} 

function onClick() {
    clicks += 1;
    // 边界处理：当clicks大于4时，回到第一张（1）
    if (clicks > 4) {
        clicks = 1;
    }
    // 调用公共函数更新进度条和计数
    updateProgressAndCount();
};

修改说明 #

1. 抽离公共函数：把重复的进度条设置和计数更新逻辑放到updateProgressAndCount()中，两个按钮的点击函数统一调用，减少代码冗余
2. 补全上一页逻辑：onSelect()添加边界判断，当clicks减到0时自动重置为4，同步更新UI
3. 优化逻辑结构：将原多个if判断改为switch，逻辑更清晰，与上一页处理逻辑保持对称

修改后，点击上一页按钮时，计数会正确递减（1→4，4→3，以此类推），进度条宽度也会同步调整。

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