CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3carousel
timmy
timmy

Reputation: 81

Progressbar for bootstrap carousel

I'm Using Bootstrap 3 carousel. I don't want to have controls or indicators but I want a progressbar. and when hover the progressbar will also pause. below is my code:

$(function() {   

   $('.carousel').carousel({
      interval: 2000,
       pause: 'hover'
   });        

   var counter =0;   
    setInterval(function() {
      counter = (counter + 1) % 100;
      $(".progressbar").css("width", counter + "%");
   }, 20);

});


<div id="mycarousel" class="carousel slide">
    <!-- Carousel Indicators -->
    <ol class="carousel-indicators">
        <li class="active" data-target="#mycarousel" data-slide-to="0"></li>
        <li data-target="#mycarousel" data-slide-to="1"></li>
        <li data-target="#mycarousel" data-slide-to="2"></li>
    </ol>  

    <div class="carousel-inner">
        <div class="item active"><img src="http://flickholdr.com/300/100" /></div>
        <div class="item"><img src="http://flickholdr.com/300/100" /></div>
        <div class="item"><img src="http://flickholdr.com/300/100" /></div>
    </div>

    <div class="progressbar"></div>
</div>

What I want it to be: http://jsfiddle.net/cfV6c/

line will be the progress bar

Upvotes: 3

Views: 7632

Answers (2)

Olivier Langelaar
Olivier Langelaar

Reputation: 186

I had another solution, setting an interval and making the carousel slide when its 100%

$(function(){
var percent = 0, bar = $('.pg-carousel'), crsl = $('.carou-java');
function progressBarCarousel() {
  bar.css({width:percent+'%'});
  percent = percent +1;
  if (percent>100) {
    crsl.carousel('next');
    percent=100;
  }
}
var barInterval = setInterval(progressBarCarousel, 100);
crsl.carousel({
    interval: false,
    pause: false
}).on('slid.bs.carousel', function () {
    percent=0;
});
crsl.hover(
    function(){
        clearInterval(barInterval);
    },
    function(){
        barInterval = setInterval(progressBarCarousel, 100);
    })
});

Upvotes: 2

leemour
leemour

Reputation: 12003

Using your example from jsfiddle, I got a working solution, but without pausing progressbar on hover. Far from perfect, but I hope it helps:

$(function() {
  var counter = 0;
  var progressBar;

  function progressBarRun() {
    progressBar = setInterval(function() {
      counter += 1;
      if (counter > 100) clearInterval(progressBar);
      $(".progressbar").css("width", counter + "%");
    }, 20);
  }
  progressBarRun();

  $('#mycarousel').on('slid.bs.carousel', function () {
    counter = 0;
    clearInterval(progressBar);
    progressBarRun();
  });
});

What do you think?

Upvotes: 1

Related Questions