如何制作一次显示三张图片的jQuery或javascript幻灯片

Question

我一直在使用jQuery查看幻灯片。现在我对做不同类型的幻灯片有很多疑问。我想知道如何为20张图像创建幻灯片，一次显示三张照片，即当前图像选择，下一张和上一张图像。幻灯片还包含如下

所示的按钮

Answer 1

使用jquery flexslider可以轻松实现这一目标。

WorkingFiddle

<强> HTML

<div id="page">
  <div id="main-slider" class="flexslider">
    <ul class="slides">
      <li>
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.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_caramel.jpg" />
      </li>
      <li>
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
      </li>
    </ul>
  </div>
  <div id="reviews-slider" class="flexslider">
    <ul class="slides">
      <li>
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.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_caramel.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_cheesecake_brownie.jpg" />
      </li>
    </ul>
  </div>
</div>

<强> JQuery的

  $('#reviews-slider').flexslider({
    animation: "slide",
    itemWidth: 200,
    itemMargin: 1,
    minItems: 3,
    maxItems: 20,
    move: 0,
  });