Question

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

Answer 1

您可以使用jQuerys函数.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%;
}

革命滑块WordPress中的进度条

1 个答案: