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有两个初始化：一个用于slide-nav - #carousel，另一个用于实际滑块 - #slider）。我已从他们的文档中提取示例并添加了＆＃39; itemWidth＆＃39;换行到#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/

FlexSlider显示3个主要图像而不是一个

1 个答案: