jquery - FlexSlider 显示 3 张主图像，而不是一张

Question

我有flexslider https://github.com/woothemes/FlexSlider 我需要同时拥有 3 张图像，并带有下面的缩略图，而不是一张主图像。

Answer 1

所以，这是您需要的 HTML 结构...

<div id="slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

在 FlexSlider 初始化中，您需要设置 itemWidth (下面的 JS 有两种初始化:一种用于幻灯片导航 - #carousel ，另一种用于实际 slider - #slider )。我从他们的文档中提取了示例，并将“itemWidth”行添加到#slider 配置中。另外，我使用window.width的原因设置宽度而不是硬编码，如果您需要它根据窗口大小是动态的，您需要使用窗口的宽度来计算它...如果您不这样做，您可以将其设置为像素值:

$(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,
    itemWidth:  ($(window).width()/3), // calculate slide width based on window, divide by 3 to show 3
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});

缩略图 slider 的文档是一个很好的起点:http://flexslider.woothemes.com/thumbnail-slider 。这是我获得 HTML 结构(上面)和用于初始化缩略图 slider 的基本 JS 的地方 - 我添加的只是 itemWidth属性为 #slider 的配置.

希望这有帮助!!

更新:工作示例的 JSFiddle 链接 - http://jsfiddle.net/davewillidow/e9U8N/4/