Propojeni Bx Slider s ProgressBarem

<style>
.example__slider .progress {
                height: 10px;
                width: 500px;
                                
            }
</style>            

<div class="example__slider">

  <div class="bxslider ctaFtSlider">
  <div><img src="images/large/image1.jpg" title="Funky roots"></div>
  <div><img src="images/large/image3.jpg" title="The long and winding road"></div>
  <div><img src="images/large/image2.jpg" title="Happy trees"></div>
</div>
<div class="progress" id="progress"></div>
</div>


<script>
  $(function(){
  $('.bxslider').bxSlider({
    mode: 'fade',        //prechod do stracena
    auto: true,            //automaticky start
    captions: true,        //title u obrazku
    speed: 500,            //rychlost prechodu
    infiniteLoop: true, //slider porad dokola
    slideWidth: 600,    //sirka slideru i s popisem
    pager: true,
    pagerType: 'full',
    autoHover: true,
    pause: 4000,
    autoDelay: 0,
 // show the bx slider after the page loads
   
   'onSliderLoad': function(){
      $('.progress').css({'display':'visible'});
      
      line.animate(1.0);
     
 },     
 'onSlideAfter': function(){
    line.set(1.0);
 },
 'onSlideBefore': function(){
  line.set(0);
 line.animate(1.0);
 } 
  });
});

</script>
<script>
    var line = new ProgressBar.Line('#progress', {
        color: '#FCB03C',
        duration: 4000,
        easing: 'easeInOut'
    });
    line.animate(1);
</script>