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）。我从他们的文档中提取了示例并将“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"
  });
});

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

希望这会有所帮助！

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