Flexslider has an out-of-the-box issue when using the "fade" animation type. Basically, there is a huge gap before the animation gets going - once it starts it is fine.
I have searched long and hard to find a solution and keep coming up with people saying you should set .slides li { display:none}
That does work - unless you have captions, in which case they vanish completely.
After staring at the live code with Chrome dev tools I noticed the problem is that if the show starts on the first slide, it has to wait for all the hidden slides to go through their animations before the loop comes back to the beginning and the visual show starts - hence the gap.
However, if in the initialisation script for flexslider set startAt: to the last slide (if you have 4 slides, set it at 3), then the next slide is the first slide and the problem is solved - PROPERLY.
Whoopee!
Now, relating that to processwire, and in this case a repeat field with images and captions, all you need to is set up a count.
$totalslides = -1;
foreach($page->slideshow_repeater as $slideshowrepeater) {
$totalslides++
.....and then insert the result into the initialisation script at the bottom of your template, for instance:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.homeflexslider').flexslider({
selector: ".homeslides > div",
initDelay: 0,
startAt: <?php echo $totalslides; ?>,
animation: "fade"
});
});
</script>And there you have it - it all works properly.
And I am going to brew a nice hot jug of good Italian coffee to celebrate!
Joss
