CODEWITHSUNDEEP
javascriptjqueryhtmlcssflexslider
Fighter Jet
Fighter Jet

Reputation: 407

Flexslider Plugin Slides Are out of Order

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.

Upvotes: 8

Views: 2351

Answers (3)

Fighter Jet
Fighter Jet

Reputation: 407

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.

Upvotes: 11

daniil.t
daniil.t

Reputation: 490

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

Upvotes: -2

badAdviceGuy
badAdviceGuy

Reputation: 2090

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

Upvotes: 0

Related Questions