Flexslider 缩略图轮播活动类无法正常工作答案

【问题标题】：Flexslider thumbnail carousel active class is not working properlyFlexslider 缩略图轮播活动类无法正常工作
【发布时间】：2018-08-31 08:14:59
【问题描述】：

我正在尝试使用 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

【问题讨论】：

您创建一个演示并分享。因此，大家更容易为您提供帮助。
不过试试这个codepen.io/nerodev/pen/GXrmLq你需要写一些自定义的CSS。
我只是尝试在演示中复制它。这个问题看起来像这样。 codepen.io/haridev/pen/MqJErr 查看轮播选择器。活动幻灯片仅针对第一张显示。

标签： jquery wordpress flexslider

【解决方案1】：

嘿，所以我采用了 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

【讨论】：

【解决方案2】：

终于可以解决这个问题了。我没有设置导致问题的 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>

感谢大家的努力和贡献。

【讨论】：