Question

我想将FlexSlider与＆＃34;缩略图＆＃34;一起使用控制导航。我无法解决的问题是：活动的全尺寸图像与缩略图导航中的活动图像（非同步）不同。

点击缩略图将显示上一个图片，并且 - 与此行为相同 - 上一个缩略图会突出显示，而不是当前显示图片的缩略图。

使用Bootstrap 3.2.0，jQuery 2.1.1和FlexSlider 2.2.2。

将生成以下HTML代码：

<div class="flexslider">
  <div class="flex-viewport" style="overflow: hidden; position: relative;">
    <ul class="slides" style="width: 1200%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-803px, 0px, 0px);">
      <li class="flex-item clone" data-thumb="/thumbnail/2014-07-13 09.16.49.jpg" style="width: 803px; float: left; display: block;">
        <img src="/fullsize/2014-07-13 09.16.49.jpg" draggable="false">
      </li>
      <li class="flex-item clone" data-thumb="/thumbnail/2014-07-13 09.16.49.jpg" aria-hidden="true" style="width: 803px; float: left; display: block;">
        <img src="/fullsize/2014-07-13 09.16.49.jpg" draggable="false">
      </li>
      <li class="flex-item flex-active-slide" data-thumb="/thumbnail/2014-07-07 09.52.56.jpg" style="width: 803px; float: left; display: block;">
       <img src="/fullsize/2014-07-07 09.52.56.jpg" draggable="false">
      </li>
      <li class="flex-item" data-thumb="/thumbnail/2014-07-09 16.22.35.jpg" style="width: 803px; float: left; display: block;">
        <img src="/fullsize/2014-07-09 16.22.35.jpg" draggable="false">
      </li>
      <li class="flex-item" data-thumb="/thumbnail/2014-07-11 14.28.42.jpg" style="width: 803px; float: left; display: block;">
        <img src="/fullsize/2014-07-11 14.28.42.jpg" draggable="false">
      </li>
      <li class="flex-item" data-thumb="/thumbnail/2014-07-13 09.16.49.jpg" style="width: 803px; float: left; display: block;">
        <img src="/fullsize/2014-07-13 09.16.49.jpg" draggable="false">
      </li>
      <li class="flex-item clone" data-thumb="/thumbnail/2014-07-07 09.52.56.jpg" aria-hidden="true" style="width: 803px; float: left; display: block;">
        <img src="/fullsize/2014-07-07 09.52.56.jpg" draggable="false">
      </li>
      <li class="flex-item clone" data-thumb="/thumbnail/2014-07-07 09.52.56.jpg" style="width: 803px; float: left; display: block;">
        <img src="/fullsize/2014-07-07 09.52.56.jpg" draggable="false">
      </li>
    </ul>
  </div>
  <ol class="flex-control-nav flex-control-thumbs">
    <li>
      <img src="/thumbnail/2014-07-07 09.52.56.jpg" draggable="false" class="flex-active">
    </li>
    <li>
      <img src="/thumbnail/2014-07-09 16.22.35.jpg" draggable="false" class="">
    </li>
    <li>
      <img src="/thumbnail/2014-07-11 14.28.42.jpg" draggable="false" class="">
    </li>
    <li>
      <img src="/thumbnail/2014-07-13 09.16.49.jpg" class="" draggable="false">
    </li>
  </ol>
  <ul class="flex-direction-nav">
    <li><a class="flex-prev" href="#">Previous</a></li>
    <li><a class="flex-next" href="#">Next</a></li>
  </ul>
</div>

这是FlexSlider的jQuery：

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails",
    start: function() {
      // get the height for the iFrame from the first image of the slide!
      var height = $('.flexslider img').first().height();
      var frame_id = window.frameElement.getAttribute('id');
      var content_height = height + 60 + 0 + "px";
      parent.document.getElementById(frame_id).style.height = content_height;
    }
  });      
});

我没有收到任何错误消息，我看不到代码有任何问题。 jQuery中的start函数用于设置使用的iFrame的高度，禁用此函数不会更改行为。对我有什么想法或暗示吗？

编辑 - 这是HTML 来源：

<div class="flexslider">
    <ul class="slides">
      <li class="flex-item" data-thumb="/thumbnail/2014-07-13 09.16.49.jpg">
        <img src="/fullsize/2014-07-13 09.16.49.jpg" />
      </li>
      <li class="flex-item" data-thumb="/thumbnail/2014-07-07 09.52.56.jpg">
        <img src="/fullsize/2014-07-07 09.52.56.jpg" />
      </li>
      <li class="flex-item" data-thumb="/thumbnail/2014-07-11 14.28.42.jpg">
        <img src="/fullsize/2014-07-11 14.28.42.jpg" />
      </li>
      <li class="flex-item" data-thumb="/thumbnail/2014-07-09 16.22.35.jpg">
        <img src="/fullsize/2014-07-09 16.22.35.jpg" />
      </li>          
    </ul>
  </div>

Answer 1

这是FlexSlider 2.2.2中的一个错误 - 降级到FlexSlider 2.2.1解决了这个问题。

在当前的GitHub存储库中，此问题已得到修复，因此即将推出的FlexSlider 2.2.3也将按预期工作。

FlexSlider具有缩略图控件导航模式

1 个答案: