CODEWITHSUNDEEP
jquerycsshtmltwitter-bootstrapcarousel
jchan94
jchan94

Reputation: 11

Changing bootstrap-progress bar with carousel

I'm trying to change the bootstrap-progress bar as it transitions with the slides.

for instance..

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

and so on and so forth.

So far, I've been able to figure out how to make the value change, but only with a checkbox. Please help me out. I

The code is provided here: http://www.bootply.com/vRKotQ1Ptc

Upvotes: 1

Views: 2188

Answers (3)

ElFranchoute
ElFranchoute

Reputation: 79

First you have to set a interval for the carousel, is data-interval="5000" as default, but is better to define it when you want use Jquery and get this value. 

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

Then you have to deactivacte the effect of .progress-bar in the CSS. 

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

Now you can code your function to fill the progress-bar. I write the code in $(document).ready(function() to execute it as the same time of the start of carousel timer(when the page is loaded). I would use setInterval, to execute the same code each "x" ms. I wrote 50 ms and i++; because I think the visual effect is better. But you can modify it as you wish, like 500 ms and i+=10. You just have to calculate a multiple of data-interval to define the interval to fill the progress-bar. 

$(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);
});

I hope that was helpfull.

Upvotes: 2

Wim Pruiksma
Wim Pruiksma

Reputation: 598

First. Always put your code here. And ofcourse the link provided is nice.

This is your jquery problem

    $('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);
});

Your html problem

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

Now. this may be your solution to your problem. Make a function out of it.

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

When running the slide you call the function. And change the value. like

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

Upvotes: 0

krsoni
krsoni

Reputation: 639

What you need is the value of valuer variable which you used as the % of progress bar. When a slide change what bootstrap does is, it add a active class to that div. So give the id of div with item class as the % of bar progressed and take it by taking value of id attribute of the class active. You have to do it with the same interval as they are using to change the slide.

Upvotes: 0

Related Questions