Circular progress animation only shows twice on slideshow

JavaScript
1

The issue I’m running into with this slideshow is that the circular progress bar (pietimer.js) will apply only twice and then simply stops while the slideshow continues to move through the pager controls.

Here is the the slideshow in question

link to fader.js (the slideshow)

link to pietimer.js (the circular progress animation)

and link to the index page of the slideshow

I do not know why it only appears twice but I believe that it’s related to the pietimer going out of sync with the slideshow (fader.js). The way I have it now is that fader.js creates a <ul> with an amount of <li>s equal to the amount of pictures and applies an active class to the first one. Pietimer.js targets this <li> and begins the circle loading animation. After 8 seconds fader.js changes the active class to the next <li>. Pietimer will successfully target that one but doesn’t remove the “pie” class from it.

I’ve tried combining the scripts into one file but the menu transitions still seem to be occurring faster than the pietimer can keep up. I have a feeling it may be due to pietimer being activated on document.ready while fader.js is loaded within the script.

Can someone shine some light on why the pietimer is only appearing twice?

2

Hi there,

This worked fine for me on Chrome latest (the circular progress bar appeared around all 12 images).

Did you get this sorted in the meantime or are you experiencing problems in a particular browser?

3

Hi, thanks for your reply. I’ve since talked to a contractor who recommended that I use a different slideshow. Using the cycle2 slideshow it was possible to get the animation to work with the plugin.