Question
My problem is about Flexslider plugin. I don't know why slides are out of order. Considering my markup:
https://stackoverflow.com/questions/21389664
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<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.
Solution
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.
OTHER TIPS
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});
});
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
