Flexslider only shows last slide until it cycles through all slides, but only with fade animation

Question

This one has me stumped. I've used Flexslider with no issues many times, but with a site I'm building now it just refuses to work properly.

The last slide will show on load and stay visible until it has cycled through all of them, at which point things will start working properly.

I've tried all sorts of things, reducing it down, but can;t seem to figure it out. The only thing that changes this behavior is if I change the animation to slide instead of fade. But I definitely want fade. And I definitely want to figure out why this is happening.

It seems like it could be a CSS issue, but I can't find it.

Here is what I am working on: http://www.coppercityinn.com.php53-4.dfw1-2.websitetestlink.com/

EDIT:

I made a couple of super reduced test cases, with just basic HTML, the Flexslider CSS/JS, and jQuery being loaded, nothing else, and the bug persists.

With fade animation, has the bug: http://www.coppercityinn.com.php53-4.dfw1-2.websitetestlink.com/wp-content/themes/coppercity/test-fade.html

EDIT 2

I am an idiot. I changed the class name of the container from "flexslider" to "hero", but did not update the flexslider.css to reflect that. [sigh]

Thanks for looking.

Answer 1

user1910673 got it right!

the following CSS..

.slides li {display:none}

..fixed my fading issue!

I wish I could upvote but don't have 15 reputation.

Answer 2

I had this problem but it was not to do with my css. I found this article helpful:

http://processwire.com/talk/topic/2283-solving-the-annoying-flexslider-fade-delay/

It says to set "slideToStart" to your last slide. ie. If you have 7 slides then start it at 6. this fixed my problem.

It is not an ideal fix but it worked for my purposes.

EDIT:

Sorry, better fix was making sure that my slides had display:none

Then it doesn't matter what slide you start on.

so turns out it was my css.