I have setup and jsfiddler: /

I need the slide to be on auto rotate and the progress-bar for each slide need to fill from 0 to 50px width. I have the rest implemented, but struggling with the rest of logic to be implemented. please note, that I want to use the existing code. thanks for your time.

I have setup and jsfiddler: http://jsfiddle/semantic/6SaJK/2/

I need the slide to be on auto rotate and the progress-bar for each slide need to fill from 0 to 50px width. I have the rest implemented, but struggling with the rest of logic to be implemented. please note, that I want to use the existing code. thanks for your time.

• javascript
• jquery
• slider
• progress-bar

Share Improve this question Follow asked Oct 11, 2012 at 8:55 JAMLJAML 21511 gold badge55 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can try using something like this: http://jsfiddle/6SaJK/28/

I cannot ment because I lack reputation on stackoverflow so my thought goes here.

OP, remember that when you'll be working on pause for slider and your progress bar you can get slight differences in timings. The bug-proof answer for every slider that needs to have animated progress bar is firing the "next" event of your slider when the progress bar finishes he's job.

With jQuery Cycle 2 you can achieve it with something like this:

function main_slider() {

    if ( $("#slider").length ) {

    var $time = 7000;
    var $speed = 500;
    var $slide_width = $("#slider").width()

    $("#slider .cycle").on("cycle-initialized", function(event, opts) {
      var $slider = $("#slider");
      var $progress = $("#slider .progress");
      var $animator = $("#slider .progress .animator");
      var propWidth = $animator.width() / $progress.width() * 100;

      $animator.animate({
        width: "100%"
      }, $time * (100 - propWidth) / 100, function(){
        $("#slider .cycle").cycle("next");
      });

    });    

    $("#slider .cycle").cycle({
      fx: "scrollHorz",
      timeout: 0,
      speed: $speed,
      slides: "li",
      next: "#slider nav .next",
      prev: "#slider nav .prev",
      pauseOnHover: true,
      sync: true,
      delay: 0,
      hideNonActive: false,
      pager: "#slider .pager ul",
      pagerTemplate: "<li><a href='#'></a></li>"

    });


    $("#slider .cycle").on("cycle-before", function(event, opts) {
      $("#slider .progress .animator").stop(true).animate({"width": 0}, 0);
      var $slider = $("#slider");
      var $progress = $("#slider .progress");
      var $animator = $("#slider .progress .animator");

      $animator.animate({
        width: "100%"
      }, $time, function(){
        $("#slider .cycle").cycle("next"); //everything is a trick :)
      });
    })

    $("#slider .cycle").on("cycle-paused", function(event, opts) {
      var $slider = $("#slider");
      var $progress = $("#slider .progress");
      var $animator = $("#slider .progress .animator");

      $animator.stop(true);
    })

    $("#slider .cycle").on("cycle-resumed", function(event, opts) {
      var $slider = $("#slider");
      var $progress = $("#slider .progress");
      var $animator = $("#slider .progress .animator");

      var propWidth = ($animator.width() / $progress.width()) * 100;

      $animator.animate({
        width: "100%"
      }, $time * ((100 - propWidth) / 100), function(){
        $("#slider .cycle").cycle("next");
      });

    });

    $("#slider .cycle").on("cycle-next", function(event, opts){
      var $slider = $("#slider");
      var $progress = $("#slider .progress");
      var $animator = $("#slider .progress .animator");
      $animator.stop(true).width(0);

      $animator.animate({
        width: "100%"
      }, $time, function(){
        $("#slider .cycle").cycle("next");
      });
    }).on("cycle-prev", function(event, opts){
      var $slider = $("#slider");
      var $progress = $("#slider .progress");
      var $animator = $("#slider .progress .animator");
      $animator.stop(true).width(0);

      $animator.animate({
        width: "100%"
      }, $time, function(){
        $("#slider .cycle").cycle("next");
      });
    })

    $("#slider").mouseenter(function(){
      var $prev = $("#slider nav .prev");
      var $next = $("#slider nav .next");
      var $duration = 500

      $prev.stop().animate({
        opacity: 1,
        left: 0
      }, $duration)

      $next.stop().animate({
        opacity: 1,
        right: 0
      }, $duration)

    }).mouseleave(function(){
      var $prev = $("#slider nav .prev");
      var $next = $("#slider nav .next");
      var $duration = 500
      $prev.stop().animate({
        opacity: 0,
        left: "-46px"
      }, $duration)
      $next.stop().animate({
        opacity: 0,
        right: "-46px"
      }, $duration)
    })

    function position_controls() {
      var $prev = $("#slider nav .prev");
      var $next = $("#slider nav .next");
      var $slider = $("#slider li");

      var $sliderH = $slider.height();
      var $controlH = $prev.height();

      var $center = ($sliderH/2) - ($controlH/2);

      $prev.css("top", $center+"px");
      $next.css("top", $center+"px");

    }

    position_controls();

    $(window).resize(function(){
      position_controls();
    })

  }

}

main_slider();

And the html structure is:

<section id="slider">
  <nav><a href="#" class="next"></a><a href="#" class="prev"></a></nav>
  <ul class="cycle">
    <li><a href="#"><img src="images/slide1.jpg" /></a></li>
    <li><a href="#"><img src="images/slide2.jpg" /></a></li>
    <li><a href="#"><img src="images/slide1.jpg" /></a></li>
    <li><a href="#"><img src="images/slide2.jpg" /></a></li>
  </ul>
  <div class="progress"><div class="animator"></div></div>
  <div class="pager"><ul></ul></div>
</section>

The jQuery part is a bit messy now because this is a dev version which I just finished thus it wasnt optimized, there are too many declarations of the variables but it does what it needs to do and there is no problem with timings.