Solving the annoying Flexslider fade delay

[Joss]

I am really pleased I have solved this particular problem!

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

[MatthewSchenker]

Hello Joss,

Very interesting. Another dimension of ProcessWire's versatility!

I have used FlexSlider for some sites, and I like it. But for various reasons I have recently started using Galleria and BxSlider for my newer sites.

Check them out here:

http://bxslider.com/

http://galleria.io/

Of course, there are endless sliders available out there. The technique you illustrate for FlexSlider would apply to any of these plugins.

Thanks,

Matthew

[Joss]

HI Matthew

Yes, I am getting a growing pile - I used bxslider before on a Seblod site.

This is another I am looking at:

http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/

But there are loads. My main criteria is trying to avoid plugins that say "and all you have to do it load these other 30 jquery plugins and off you go..."

I feel I am loading plenty on my site already!

Joss

[MatthewSchenker]

Hey Joss,

I have a bookmark folder filled with JQuery slideshow plugins, listed in order of preference... Then we have all those articles from Smashing and .net magazine reviewing lists of them.

My main criteria for slideshows is that they must...

1. Capture the slide information from a simple HMTL element (an li, img, or DIV)

2. Allow customized index "disks" and pagination

3. Allow the use of any kind of slide content (image, HTML, links, etc)

4. Allow multiple slideshows on a page

Thanks,

Matthew