Flexslider Plugin Slides Are out of Order

Asked 27/1, 2014 at 19:17 Answered 30/1, 2014 at 15:49

Solved javascript jquery html css flexslider

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.

Archie answered 27/1, 2014 at 19:17 Comment(2)

I've had the same problem, fixed according to your remark; removed animation: "slide" – Effluence 30/1, 2014 at 9:52

@icezAz read my answer to this question. – Archie 30/1, 2014 at 15:50

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.

Archie answered 30/1, 2014 at 15:49 Comment(3)

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. – Lambent 15/2, 2014 at 2:24

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 – Ginn 7/10, 2014 at 7:30

You saved my sanity tonight! – Griffie 29/4, 2015 at 1:30

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});
});

Teilo answered 27/1, 2014 at 19:50 Comment(0)

-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

Camara answered 27/1, 2014 at 19:22 Comment(2)

No this is not the case. – Archie 27/1, 2014 at 19:33

Did you put JS inside the <head> element? Did you link the CSS, jQuery and FlexSlider to your page? Please provide the full code for your page. – Camara 27/1, 2014 at 19:40

Recommended topics

Hot tags