Изменение бутстрапа-прогресс-бара с карусели

Question

Я пытаюсь изменить индикатор выполнения загрузки, когда он переходит со слайдами.

, например ..

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

и так далее и тому подобное.

До сих пор я мог выяснить, как изменить значение, но только с помощью флажка. Пожалуйста, помогите мне. Я

Код приводится здесь: http://www.bootply.com/vRKotQ1Ptc

Answer 1

Что вам нужно, это значение valuer переменной, которая используется в качестве% от прогресса бар. Когда слайд изменяет то, что делает bootstrap, он добавляет класс active к этому div. Поэтому дайте id из div с классом item в качестве% от пропущенного бара и возьмите его, взяв значение id атрибут класса active. Вы должны сделать это с тем же интервалом, который они используют для изменения слайда.

Answer 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); 

Answer 3

Сначала вы должны установить интервал для карусели, является data-interval="5000" по умолчанию, но лучше, чтобы определить, когда вы хотите использовать Jquery и получить это значение.

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

Тогда вы должны deactivacte эффект .progress-bar в CSS.

.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» ms. Я написал 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); 
}); 

Надеюсь, что было полезноl.