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.
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.
Share Improve this question edited Jan 27, 2014 at 19:41 Fighter Jet asked Jan 27, 2014 at 19:17 Fighter JetFighter Jet 4071 gold badge6 silver badges21 bronze badges 2-
I've had the same problem, fixed according to your remark; removed
animation: "slide"– vonUbisch Commented Jan 30, 2014 at 9:52 - @icezAz read my answer to this question. – Fighter Jet Commented Jan 30, 2014 at 15:50
3 Answers
Reset to default 11This 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 ment to make a working package available to you for download.
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./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