使用轮播更改引导进度条答案

【问题标题】：Changing bootstrap-progress bar with carousel使用轮播更改引导进度条
【发布时间】：2016-03-05 03:24:53
【问题描述】：

我正在尝试更改引导进度条，因为它与幻灯片一起过渡。

例如..

slide 1 = 16%
slide 2 = 32%
slide 3 = 48%

等等等等。

到目前为止，我已经能够弄清楚如何更改值，但只能使用复选框。请帮帮我。我

这里提供了代码： http://www.bootply.com/vRKotQ1Ptc

【问题讨论】：

标签： jquery css html twitter-bootstrap carousel

【解决方案1】：

首先你必须为轮播设置一个间隔，默认是data-interval="5000"，但是当你想使用Jquery并获得这个值时最好定义它。

<div class="carousel slide" data-ride="carousel" id="quote-carousel" data-interval="5000">

然后你必须在 CSS 中停用 .progress-bar 的效果。

.progress-bar {
  background-color:#F0A340!important;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

现在您可以编写函数来填充进度条。我在$(document).ready(function() 中编写代码以在轮播计时器启动的同时执行它（加载页面时）。我会使用setInterval，在每个“x”毫秒执行相同的代码。我写了50 ms和i++;，因为我觉得视觉效果更好。但是你可以随意修改它，比如500 ms和i+=10。您只需计算data-interval 的倍数即可定义填充进度条的间隔。

$(document).ready(function(){
  var i = 0;
  setInterval(function() {
    $('.progress-bar').css('width', i + '%').css('value', i);
    i++;
    if(i==100)
      i = 0;
    console.log(i);
}, 50);
});

我希望这会有所帮助。

【讨论】：

这很好，但它只是一个正在运行的进度条。
是的，是与幻灯片同步的运行进度条。也许我理解不好你想要什么？
抱歉。我明白你的意思了。然而，这不是我想要的。例如，如果幻灯片是 1，那么最大进度条是 16%，然后是幻灯片 2、33%、幻灯片 3、50%，等等。幻灯片 6 是最大值，当它再次点击幻灯片 1 时，它重置为 0%。从本质上讲，它是通过幻灯片进行的。
也很抱歉，我没听懂。你想要它只用于 6 幻灯片还是动态的？
是的，所以箭头使进度条前进，同时也移动幻灯片。

【解决方案2】：

首先。总是把你的代码放在这里。当然，提供的链接很好。

这是你的 jquery 问题

    $('input').on('click', function(){
  var valeur = 0;
  $('input:checked').each(function(){
       if ( $(this).attr('value') > valeur )
       {
           valeur =  $(this).attr('value');
       }
  });
  $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);
});

你的 html 问题

<div class="progress progress-striped active">
            <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
            </div>
          </div>

现在。这可能是您解决问题的方法。用它做一个函数。

function newProgress(value){
          $('.progress-bar').css('width', value+'%').attr('aria-valuenow', value);
};

运行幻灯片时，您调用该函数。并改变价值。喜欢

    //running slider here
var data = "90"; //<=== Put here your %
    var value$('.progress-bar').attr('value', data);
//now you call the function
newProgress(value );

【讨论】：

我的 jquery 不是很好，你介意在 bootply 的 jsfiddle 中展示它吗？

【解决方案3】：

您需要的是您用作进度条百分比的valuer 变量的值。当幻灯片更改引导程序所做的事情时，它会向该div 添加一个active 类。因此，将div 的id 和item 类作为进度条的百分比，并通过获取类active 的id 属性的值来获取它。您必须以与他们更改幻灯片相同的时间间隔执行此操作。

【讨论】：