革命滑块WordPress中的进度条答案

【问题标题】：Progress Bar in revolution slider WordPress革命滑块WordPress中的进度条
【发布时间】：2018-06-19 07:33:54
【问题描述】：

我从 source 中找到了使我的进度条看起来像我需要的代码。一切都按预期正常工作。但我需要使整个进度条宽度偏离主页 50%。我尝试将所有span 添加到一个div 中，并使div 宽度为50-60%，但这没有帮助。需要一些帮助，谢谢

【问题讨论】：

你能分享一些代码吗？需要明确的是，您希望进度条（跨度）加起来是滑块宽度的 50%？
是的，将所有跨度校正为滑块宽度的 50%。
请阅读How to Ask和minimal reproducible example，然后相应地编辑您的问题。

标签： javascript wordpress revolution-slider

【解决方案1】：

您可以使用 jQuery 函数 .wrapAll() 将 span 元素包装在父容器中。给这个新容器一个类并将位置设置为绝对，左偏移为 25%，右偏移为 25%。

// JS

api.on('revolution.slide.onloaded', function() {

    var totalSlides = api.revmaxslide(),
        perc = parseFloat((100 / totalSlides).toFixed(2));

    for(var i = 0; i < totalSlides; i++) {

        progressSlots[i] = jQuery(
            '<span class="rev-progress-perc" ' + 
                  'style="width: ' + perc + '%; left: ' + (perc * i) + '%" ' + 
                  'data-slide="' + i + '" ' + 
            '/>'
        );

    }

    progressSlots.wrapAll('slots-wrapper');

    api.append(progressSlots);
    progressBar = jQuery('.tp-bannertimer');
    progressSlots = jQuery('.rev-progress-perc').on('click', changeSlides);

})
...

// CSS

.slots-wrapper{
    position: absolute;
    z-index:99;
    bottom: 0;
    left: 25%; right: 25%;
}

【讨论】：

不抱歉，这行不通，只是中断代码并使进度条一张一张地出现在单张幻灯片中。
您可以尝试将 z-index 添加到包装器中吗？
确定我会尝试但没有帮助。
这就是为什么回答完全不清楚并且基于外部代码而不是minimal reproducible example @frederik 的问题很复杂的原因这个问题很可能会被系统自动删除窗口：（
@brasofilo 是的，提供的链接中有一些代码，我试过....