Я схожу с ума, пытаясь понять, что делаю здесь не так. Я только что создал тестовую html-страницу с ТОЧНЫМ кодом и изображениями с демонстрационной страницы http://flexslider.woothemes.com/thumbnail-controlnav.html
<body>
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="jquery.flexslider.js" type="text/javascript"></script>
<script type="text/javascript">
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails"
});
});
</script>
</head>
<div class="flexslider">
<ul class="slides">
<li data-thumb="slide1-thumb.jpg">
<img src="slide1.jpg" />
</li>
<li data-thumb="slide2-thumb.jpg">
<img src="slide2.jpg" />
</li>
<li data-thumb="slide3-thumb.jpg">
<img src="slide3.jpg" />
</li>
<li data-thumb="slide4-thumb.jpg">
<img src="slide4.jpg" />
</li>
</ul>
</div>
</body>
Похоже, что все в порядке, за исключением того факта, что в моей 4 галерее изображений Flexslider выделяет эскиз 1 и отображает изображение 4, затем выделяет эскиз 2 и отображает изображение 1 и т. Д.
миниатюра 1 отображает изображение 4 миниатюра 2 отображает изображение 1 миниатюру 3 отображает изображение 2 миниатюру 4 отображает изображение 3, затем оно циклически повторяется.
Есть у кого-нибудь идеи?
Пожалуйста, спаси мою голову!
