8

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.

Fighter Jet
  • 407
  • 1
  • 5
  • 19

3 Answers3

11

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.

Fighter Jet
  • 407
  • 1
  • 5
  • 19
  • 1
    I was having the same issue and it seems it was indeed the corrupted .js file in the package. I just downloaded a fresh copy from github and it has been fixed. – javy Feb 15 '14 at 02:24
  • 1
    It doesn't seem to be a corruption, just a bug in 2.2.2 The github issues list references a patch for it, but it still hasn't been deployed in a stable release – benz001 Oct 07 '14 at 07:30
  • You saved my sanity tonight! – jerrygarciuh Apr 29 '15 at 01:30
0

It's hard to tell what is going wrong without all of the code, but this may be a solution for you. 

$(window).ready(function() {
  $('.flexslider').flexslider({animation: "slide", startAt: 0});
});
badAdviceGuy
  • 2,060
  • 1
  • 16
  • 12
-2

This is because you put the slides in an unordered list, when you should use ordered list like this:

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="flexslider.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="jquery.flexslider.js"></script>

    <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider({animation: "slide"});
      });
    </script>
</head>
<body>
    <div class="flexslider">
      <ul class="slides">
        <li>First Slide</li>
        <li>Second Slide</li>
        <li>Third Slide</li>
      </ul>
    </div>
</body>
</html>

EDIT: Try the updated code. Make sure that you load the flexslider.css before JS and you use $(window).load

daniil.t
  • 490
  • 2
  • 9