我正在尝试使用flexslider将文本作为控件导航而不是缩略图实现Slider。一切正常，但与主滑块同步的轮播滑块未正确获得'flex-active-slide'类。第一个'li'是获得类名而不是其他人。
<script type="text/javascript">
jQuery(window).load(function(){
jQuery( '#carousel' ).flexslider({
animation: "slide",
animationLoop: false,
controlNav: false,
directionNav: false,
slideshow: false,
direction: "vertical",
asNavFor: '#flexslider'
});
jQuery( '#flexslider' ).flexslider({
animation: 'slide',
slideshowSpeed: 4000,
animationSpeed: 600,
pauseOnAction: true,
pauseOnHover: false,
controlNav: false,
directionNav: false,
prevText: 'Previous',
nextText: 'Next',
controlsContainer: 'flexslider',
sync: "#carousel"
});
});
</script>
<div id="flexslider" class="flexslider" style="height:auto;">
<ul class="slides">
<li>
<a href="#">
<img src="images/img1.jpg" alt="Revitalising govt schools" class="ca-image" /></a>
<div class="content">
<a href="#">Revitalising govt schools</a><div class='go-more'><p class='sub-text'>Let's educate for a better world</p><a href='#' class='more'>Please Donate</a></div></div>
</li>
<li>
<a href="#" title="Revitalising govt schools">
<img src="images/img1.jpg" alt="Revitalising govt schools" class="ca-image" /></a>
<div class="content">
<a href="#" title="Revitalising govt schools">Revitalising govt schools</a><div class='go-more'><p class='sub-text'>Let's educate for a better world</p><a href='#' class='more'>Please Donate</a></div></div>
</li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<div class="excerpt"><p>This will be the excerpt text for this space</p></div>
</li>
<li>
<div class="excerpt"><p>This will be the excerpt text for this space 2</p></div>
</li>
</ul>
</div>
这就是我编码的方式。我能够使用文本轮播来控制滑块，但主动滑动指示器不会出现在第一个轮播幻灯片之外的任何其他位置。 Flexslider版本使用它2.7.1
更新
刚刚在这个问题上做了一个演示，以便您轻松参考。 https://codepen.io/haridev/pen/MqJErr
嘿所以我采用了flexslider从其网站提供的示例，并进行了修改，以添加文本插入图像及其应有的工作。
.flex-active-slide类它应该改变它，所以你可以使用它来修改css并根据你的需要进行调整。
<!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
This will be the excerpt text for this space
</li>
<li>
This will be the excerpt text for this space 2
</li>
<li>
This will be the excerpt text for this space 3
</li>
<li>
This will be the excerpt text for this space 4
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
和jQuery
$(window).load(function() {
// The slider being synced must be initialized first
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
这是一个有效的例子：https://codepen.io/anon/pen/yxgjeB
最后我可以解决这个问题。我没有设置导致问题的Itemwidth和Itemmargin属性。更新代码如下所示
jQuery(window).load(function(){
jQuery( '#carousel' ).flexslider({
animation: "slide",
animationLoop: false,
controlNav: false,
directionNav: false,
slideshow: false,
itemWidth: 580,
itemMargin: 5,
asNavFor: '#flexslider'
});
jQuery( '#flexslider' ).flexslider({
animation: 'fade',
slideshowSpeed: 4000,
animationSpeed: 600,
pauseOnAction: true,
pauseOnHover: false,
controlNav: true,
directionNav: false,
prevText: 'Previous',
nextText: 'Next',
controlsContainer: 'flexslider',
sync: "#carousel"
});
});
</script>
谢谢大家的努力和贡献。