Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Progress bar #41

Open
Jack94son opened this issue Aug 26, 2021 · 1 comment
Open

Progress bar #41

Jack94son opened this issue Aug 26, 2021 · 1 comment
Labels

Comments

@Jack94son
Copy link

Jack94son commented Aug 26, 2021

Hi, thanks for implementing this awesome plugin!
Would like to ask what if I want to add in the progress bar for the carousel?

Which callback function should I place the startProgressBar() and resetProgressBar()?

I tried to play around, but no luck for me.

onRendered: function( slider ) {
      var $totalSlide = slider.items.length;
      var item = slider.nearestIndex() + 1;

      $('.cmr-slider-counter > .current-counter').html(item);
      $('.cmr-slider-counter > .total-counter').html($totalSlide);

      startProgressBar(slider.autoPlayDelay);
  },
  onAnimateFinished: function( slider ) {
      resetProgressBar();
  }

this only worked once the carousel loaded.
when the item changed, the progress bar not working.

@specious
Copy link
Owner

It seems like you could start the progress bar at the same time you set the carousel in motion, and update it on the onRendered event.

You know how many fps the carousel is set to update, and the logic inside playFrame() implicitly determines how many frames will be rendered before the carousel stops.

If you don't feel like "doing the math" from the formula, you could probably just tweak your progress update heuristic until the result looks about right.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants