Slick: Progress Timer

[wing5wong]

Hi there, just a question on whether you plan to have a timer bar included, or if you know how to implement one. Would be nice to visually represent the time between slide transitions

[kenwheeler]

It would only really apply for autoplay. I, personally, would hook into the autoplay timer and animate the width of a div relative to elapsed ticks vs slide change duration.

[acoard]

Edit: Problem solved! Turns out pauseOnHover was the culprit, and I had to explicitly set it to false in the carousel initialization. D'oh!

Hey Ken,

First off, thanks so much for the carousel, truly appreciate it.

So, before seeing this thread I ended up doing the very same thing. My issue is that hooking into the autoplay timer is not as reliable as I would like.

Here's the console log from what I get. 'TIME' at the top is what is passed into

TIME: 1000ms
carousel init!
init: 2038.190ms
beforeChange: 1766.900ms
beforeChange: 1508.751ms
beforeChange: 1510.872ms
beforeChange: 1507.143ms
beforeChange: 60025.274ms
beforeChange: 1512.092ms
beforeChange: 1507.030ms
beforeChange: 1508.088ms

And the code for the timers:

this.$carousel.on('init', function(){
  console.log('carousel init!');
  console.time('init');
}.bind(this));

this.$carousel.on('beforeChange', function(evt){

  console.timeEnd('init')
  console.timeEnd('beforeChange');
  console.time('beforeChange');
}.bind(this))

And the code for initializing your excellent slick carousel:

this.$carousel.slick({
      autoplay: true,
      dots: true,
      mobileFirst: true,
      respondTo: 'min',
      adaptiveHeight: false,
      autoplaySpeed: this.config.timePerSlide,
});

Any help in making having the times line up more would be greatly appreciated. Thanks!

[kenwheeler]

@acoard thats wacky, what speed are the animations running at?

[pgtaboada]

I finde the idea of having a progress bar not bad. Is there a nice way to properly hook to the transition , so we can have our progress bar?

[powerbuoy]

Just FYI, I recently implemented this myself and solved it entirely using CSS. What I did was add an ::after element to every slide, containing the progress bar. The element is initially scaleX(0) but when the .slick-slide receives the .slick-active class I trigger a CSS animation that goes from scaleX(0) to scaleX(1) in the same amount of time as my autoplaySpeed.

[joebentaylor]

Really need something like this, as when you use custom pagination it means the animation is out of time and doesnt work :S

[powerbuoy]

@joebentaylor not sure I follow. If someone manually changes slide obviously he can do so at any point in the progress bar animation. There's no way of knowing when a user might manually change slides though so not sure how you suggest we solve that.