Question

我正在尝试使用文本作为导航控件而不是使用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

Answer 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

Answer 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>

感谢大家的努力和贡献。

Flexslider缩略图轮播活动类无法正常运行

2 个答案: