How to add a progress bar (timeline) to a slider, like slides or nivoslider

Question

I want to add a progress bar to a JavaScript slideshow (e.g. SlidesJS or Nivoslider).

I found this question that covers some of what I need, but I can’t integrate it into my slide show.

Here is an example of what I need.

For example, when I focus a slide show (or the pause button), the timeline and slider will pause, and I can resume (when I exit).

Here is the code that I still have:

<div id="products_example"> <div id="products"> <div id="slides_timeline"></div> <div class="slides_container"> <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-3-2x.jpg" width="366" alt="1144953 3 2x"></a> <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-1-2x.jpg" width="366" alt="1144953 1 2x"></a> <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-2-2x.jpg" width="366" alt="1144953 2 2x"></a> <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-4-2x.jpg" width="366" alt="1144953 4 2x"></a> <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-5-2x.jpg" width="366" alt="1144953 5 2x"></a> <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-6-2x.jpg" width="366" alt="1144953 6 2x"></a> <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-p-2x.jpg" width="366" alt="1144953 P 2x"></a> </div> <ul class="pagination"> <li><a href="#"><img src="img/1144953-3-2x.jpg" width="55" alt="1144953 3 2x"></a></li> <li><a href="#"><img src="img/1144953-1-2x.jpg" width="55" alt="1144953 1 2x"></a></li> <li><a href="#"><img src="img/1144953-2-2x.jpg" width="55" alt="1144953 2 2x"></a></li> <li><a href="#"><img src="img/1144953-4-2x.jpg" width="55" alt="1144953 4 2x"></a></li> <li><a href="#"><img src="img/1144953-5-2x.jpg" width="55" alt="1144953 5 2x"></a></li> <li><a href="#"><img src="img/1144953-6-2x.jpg" width="55" alt="1144953 6 2x"></a></li> <li><a href="#"><img src="img/1144953-p-2x.jpg" width="55" alt="1144953 P 2x"></a></li> </ul> </div> </div> 

 $(function(){ $('#products').slides({ preload: true, preloadImage: 'img/loading.gif', effect: 'fade', slideSpeed:300, crossFade:true, fadeSpeed: 500, generateNextPrev: true, generatePagination: false, play: 5000, hoverPause:true, animationStart: function(){animateTimeline();}, // Function called at the start of animation animationComplete: function(){}, // Function called at the completion of animation slidesLoaded: function() {} // Function is called when slides is fully loaded }); }); ////reset timeline function resetTimeline(){ var timeline = $("#slides_timeline"); timeline.css({width:'0'},0); } ////animate timeline function animateTimeline(){ var timeline = $("#slides_timeline"); timeline.stop().css({width:'0',opacity:1},0); timeline.stop().animate({width:'100%'},5000,'linear',function(){$(this).animate({opacity:0,width:0})}); } $("#products .next,.pagination li a").click(function(){ resetTimeline(); }); 

Answer 1

There are several different ways you can do this, but from a high level, here is what I would do:

Each of these types of slide shows, whether you use it or not, mainly uses the setInterval function, and you clear the timer or pause it on hover. That way, you have access to the someplace variable inside the function, which sets the number of milliseconds that you want to show each slide before moving it, and setInterval runs the function, which moves to the next slide. I would like to access this variable and then use it to control the jquery rotate plugin, which you can control with milliseconds in the slider function.

https://code.google.com/p/jqueryrotate/

If you want a execution style similar to the one in your example, you basically need to convert the number of milliseconds for each slide to a percentage value like this: (current / total milliseconds) * 100, and then apply this as a percentage of the width progress bar to make it look like an animation.