Flexslider Plugin Slides Are out of Order

Question

My problem is about Flexslider plugin. I don't know why slides are out of order. Considering my markup:

<div class="flexslider">
  <ul class="slides">
    <li>First Slide</li>
    <li>Second Slide</li>
    <li>Third Slide</li>
  </ul>
</div>

I have this result:

First li appears as second slide, second li as third slide, and third li as first slide.

This problem appears when I add animation: "slide" option, like this:

$(window).ready(function() {
    $('.flexslider').flexslider({animation: "slide"});
});

I'm confused, maybe somewhere in my code some CSS causes this behavior.

Answer 1

This problem is a bug in flexslider version 2.2.2 download package. Even the demo file in the downloaded package does not work fine, really!

After so much investigation I found out the "jquery.flexslider.js" has problem and got a working file from version 2.2.0.

The solution: Get a working package version 2.2.0. If you are interested make a comment to make a working package available to you for download.