Slider

图片轮播模块，源自 FlexSlider。

组件演示

default（默认）

<div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
  </ul>
</div>

default（标题）

这是标题标题标题标题标题标题标题0
这是标题标题标题标题标题标题标题1
这是标题标题标题标题标题标题标题2
这是标题标题标题标题标题标题标题3

<div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{&quot;animation&quot;:&quot;slide&quot;,&quot;slideshow&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">这是标题标题标题标题标题标题标题0</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">这是标题标题标题标题标题标题标题1</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">这是标题标题标题标题标题标题标题2</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">这是标题标题标题标题标题标题标题3</div>
    </li>
  </ul>
</div>

default（多图）

<div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{&quot;animation&quot;:&quot;slide&quot;,&quot;animationLoop&quot;:false,&quot;itemWidth&quot;:200,&quot;itemMargin&quot;:5}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li data-thumb="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
  </ul>
</div>

default（缩略图）

<div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{&quot;animation&quot;:&quot;slide&quot;,&quot;controlNav&quot;:&quot;thumbnails&quot;}'>
  <ul class="am-slides">
    <li data-thumb="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li data-thumb="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li data-thumb="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li data-thumb="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
  </ul>
</div>

a1（圆形控制点）

<div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
  </ul>
</div>

a2（方形控制点）

<div data-am-widget="slider" class="am-slider am-slider-a2" data-am-slider='{&quot;directionNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
  </ul>
</div>

a3（底部黑边圆形控制点）

<div data-am-widget="slider" class="am-slider am-slider-a3" data-am-slider='{&quot;directionNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
  </ul>
</div>

a4（底部白边圆形控制点）

<div data-am-widget="slider" class="am-slider am-slider-a4" data-am-slider='{&quot;directionNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
  </ul>
</div>

a5（长条等分控制点）

<div data-am-widget="slider" class="am-slider am-slider-a5" data-am-slider='{&quot;directionNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
  </ul>
</div>

b1（方形居中左右箭头）

<div data-am-widget="slider" class="am-slider am-slider-b1" data-am-slider='{&quot;controlNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
  </ul>
</div>

b2（圆形居中左右箭头）

<div data-am-widget="slider" class="am-slider am-slider-b2" data-am-slider='{&quot;controlNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
  </ul>
</div>

b3（图片外左右箭头）

<div data-am-widget="slider" class="am-slider am-slider-b3" data-am-slider='{&quot;controlNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
  </ul>
</div>

b4（图片外左右圆形箭头）

<div data-am-widget="slider" class="am-slider am-slider-b4" data-am-slider='{&quot;controlNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
    </li>
  </ul>
</div>

c1（标题+长条控制点）

远方有一个地方那里种有我们的梦想
某天也许会相遇相遇在这个好地方
不要太担心只因为我相信终会走过这条遥远的道路
OH PARA PARADISE 是否那么重要你是否那么地遥远

<div data-am-widget="slider" class="am-slider am-slider-c1" data-am-slider='{&quot;directionNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">远方 有一个地方 那里种有我们的梦想</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">某天 也许会相遇 相遇在这个好地方</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">不要太担心 只因为我相信 终会走过这条遥远的道路</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">OH PARA PARADISE 是否那么重要 你是否那么地遥远</div>
    </li>
  </ul>
</div>

c2（标题+方形控制点）

远方有一个地方那里种有我们的梦想
某天也许会相遇相遇在这个好地方
不要太担心只因为我相信终会走过这条遥远的道路
OH PARA PARADISE 是否那么重要你是否那么地遥远

<div data-am-widget="slider" class="am-slider am-slider-c2" data-am-slider='{&quot;directionNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">远方 有一个地方 那里种有我们的梦想</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">某天 也许会相遇 相遇在这个好地方</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">不要太担心 只因为我相信 终会走过这条遥远的道路</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">OH PARA PARADISE 是否那么重要 你是否那么地遥远</div>
    </li>
  </ul>
</div>

c3（标题+居中左右箭头）

1/4
远方有一个地方那里种有我们的梦想
2/4
某天也许会相遇相遇在这个好地方
3/4
不要太担心只因为我相信终会走过这条遥远的道路
4/4
OH PARA PARADISE 是否那么重要你是否那么地遥远

<div data-am-widget="slider" class="am-slider am-slider-c3" data-am-slider='{&quot;controlNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <div class="am-slider-counter">
          <span class="am-active">1</span>/4</div>远方 有一个地方 那里种有我们的梦想</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <div class="am-slider-counter">
          <span class="am-active">2</span>/4</div>某天 也许会相遇 相遇在这个好地方</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <div class="am-slider-counter">
          <span class="am-active">3</span>/4</div>不要太担心 只因为我相信 终会走过这条遥远的道路</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <div class="am-slider-counter">
          <span class="am-active">4</span>/4</div>OH PARA PARADISE 是否那么重要 你是否那么地遥远</div>
    </li>
  </ul>
</div>

c4（标题+居底左右箭头）

远方有一个地方那里种有我们的梦想
某天也许会相遇相遇在这个好地方
不要太担心只因为我相信终会走过这条遥远的道路
OH PARA PARADISE 是否那么重要你是否那么地遥远

<div data-am-widget="slider" class="am-slider am-slider-c4" data-am-slider='{&quot;controlNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">远方 有一个地方 那里种有我们的梦想</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">某天 也许会相遇 相遇在这个好地方</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">不要太担心 只因为我相信 终会走过这条遥远的道路</div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">OH PARA PARADISE 是否那么重要 你是否那么地遥远</div>
    </li>
  </ul>
</div>

d1（标题+底部圆形左右箭头）

远方有一个地方那里种有我们的梦想
了解更多
某天也许会相遇相遇在这个好地方
了解更多
不要太担心只因为我相信终会走过这条遥远的道路
了解更多
OH PARA PARADISE 是否那么重要你是否那么地遥远
了解更多

<div data-am-widget="slider" class="am-slider am-slider-d1" data-am-slider='{&quot;controlNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <h2 class="am-slider-title">远方 有一个地方 那里种有我们的梦想</h2>
        <a class="am-slider-more">了解更多</a>
      </div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <h2 class="am-slider-title">某天 也许会相遇 相遇在这个好地方</h2>
        <a class="am-slider-more">了解更多</a>
      </div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <h2 class="am-slider-title">不要太担心 只因为我相信 终会走过这条遥远的道路</h2>
        <a class="am-slider-more">了解更多</a>
      </div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <h2 class="am-slider-title">OH PARA PARADISE 是否那么重要 你是否那么地遥远</h2>
        <a class="am-slider-more">了解更多</a>
      </div>
    </li>
  </ul>
</div>

d2（浮层标题+底部圆形控制点）

远方有一个地方那里种有我们的梦想
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
了解更多
某天也许会相遇相遇在这个好地方
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
了解更多
不要太担心只因为我相信终会走过这条遥远的道路
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
了解更多
OH PARA PARADISE 是否那么重要你是否那么地遥远
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
了解更多

<div data-am-widget="slider" class="am-slider am-slider-d2" data-am-slider='{&quot;directionNav&quot;:false}'>
  <ul class="am-slides">
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <div class="am-slider-content">
          <h2 class="am-slider-title">远方 有一个地方 那里种有我们的梦想</h2>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
        </div>
        <a class="am-slider-more">了解更多</a>
      </div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <div class="am-slider-content">
          <h2 class="am-slider-title">某天 也许会相遇 相遇在这个好地方</h2>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
        </div>
        <a class="am-slider-more">了解更多</a>
      </div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <div class="am-slider-content">
          <h2 class="am-slider-title">不要太担心 只因为我相信 终会走过这条遥远的道路</h2>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
        </div>
        <a class="am-slider-more">了解更多</a>
      </div>
    </li>
    <li>
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <div class="am-slider-content">
          <h2 class="am-slider-title">OH PARA PARADISE 是否那么重要 你是否那么地遥远</h2>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
        </div>
        <a class="am-slider-more">了解更多</a>
      </div>
    </li>
  </ul>
</div>

d3（标题+缩略图导航）

远方有一个地方那里种有我们的梦想
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
某天也许会相遇相遇在这个好地方
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
不要太担心只因为我相信终会走过这条遥远的道路
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
OH PARA PARADISE 是否那么重要你是否那么地遥远
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内

<div data-am-widget="slider" class="am-slider am-slider-d3" data-am-slider='{&quot;controlNav&quot;:&quot;thumbnails&quot;,&quot;directionNav&quot;:false}'>
  <ul class="am-slides">
    <li data-thumb="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <h2 class="am-slider-title">远方 有一个地方 那里种有我们的梦想</h2>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
      </div>
    </li>
    <li data-thumb="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <h2 class="am-slider-title">某天 也许会相遇 相遇在这个好地方</h2>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
      </div>
    </li>
    <li data-thumb="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <h2 class="am-slider-title">不要太担心 只因为我相信 终会走过这条遥远的道路</h2>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
      </div>
    </li>
    <li data-thumb="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <img src="/Amaze/1.x/assets/i/docs/1F41G44Q7-1.jpg">
      <div class="am-slider-desc">
        <h2 class="am-slider-title">OH PARA PARADISE 是否那么重要 你是否那么地遥远</h2>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
      </div>
    </li>
  </ul>
</div>

使用方法

直接使用

拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（点此下载） <body> 区域；
将示例代码中的内容替换为自己的内容。

使用 Handlebars

本组件 Handlebars partial 名称为 slider，使用细节参照折叠面板组件。

云适配 WebIDE

将组件拖入编辑界面；
点击右侧面板里的【数据采集】按钮，按以下格式采集数据。

var content = [
  {
    "img": "",      // 表示轮播图片的路径，如：xxx.src() ，必传
    "link": "",     // 链接，可选
    "thumb": "",    // 如果需要，添加缩略图，填写缩略图的地址
    "desc": ""      // 当前图片的附加信息，支持 HTML，为高级定制提供 HTML 接口
  }
];

return content;

数据接口

{
  // id
  "id": "",

  // 自定义 class
  "className": "",

  // 主题
  "theme": "",

  // 配置，根据需求进行设置，传递 JSON 字符串
  "sliderConfig": "{}",

  //内容（*为必备项）
  "content": [
    {
      "img": "",
      "link": "", // 链接
      "thumb": "", // 缩略图
      "desc": "" // 附加信息，支持DOM，为高级定制提供DOM接口
    }
  ]
}

Slider 参数说明

注意：通过模块传递的JSON字符串参数无法传递 callback，如需传递 callback 函数，请手动启动 slider：

添加 am-slider-manual 类名，禁用模块默认的初始化函数；
在自定义脚本里调用 slider：

$(function() {
  $('.am-slider-manual').flexslider({
  // options
  });
});

以下为插件所有参数：

{
  namespace: "am-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
  selector: ".am-slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
  animation: "slide",              //String: Select your animation type, "fade" or "slide"
  easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
  direction: "horizontal",        //String: Select the sliding direction, "horizontal" or "vertical"
  reverse: false,                 //{NEW} Boolean: Reverse the animation direction
  animationLoop: true,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
  smoothHeight: false,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
  startAt: 0,                     //Integer: The slide that the slider should start on. Array notation (0 = first slide)
  slideshow: true,                //Boolean: Animate slider automatically
  slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
  animationSpeed: 600,            //Integer: Set the speed of animations, in milliseconds
  initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
  randomize: false,               //Boolean: Randomize slide order

  // Usability features
  pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
  pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
  useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
  touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
  video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches

  // Primary Controls
  controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
  directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
  prevText: "Previous",           //String: Set the text for the "previous" directionNav item
  nextText: "Next",               //String: Set the text for the "next" directionNav item

  // Secondary Navigation
  keyboard: true,                 //Boolean: Allow slider navigating via keyboard left/right keys
  multipleKeyboard: false,        //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
  mousewheel: false,              //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
  pausePlay: false,               //Boolean: Create pause/play dynamic element
  pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item
  playText: 'Play',               //String: Set the text for the "play" pausePlay item

  // Special properties
  controlsContainer: "",          //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
  manualControls: "",             //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
  sync: "",                       //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
  asNavFor: "",                   //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider

  // Carousel Options
  itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
  itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
  minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
  maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
  move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.

  // Callback API
  start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
  before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
  after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
  end: function(){},              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
  added: function(){},            //{NEW} Callback: function(slider) - Fires after a slide is added
  removed: function(){}           //{NEW} Callback: function(slider) - Fires after a slide is removed
}

Web 组件

Slider

目录

组件演示

default（默认）

default（标题）

default（多图）

default（缩略图）

a1（圆形控制点）

a2（方形控制点）

a3（底部黑边圆形控制点）

a4（底部白边圆形控制点）

a5（长条等分控制点）

b1（方形居中左右箭头）

b2（圆形居中左右箭头）

b3（图片外左右箭头）

b4（图片外左右圆形箭头）

c1（标题+长条控制点）

c2（标题+方形控制点）

c3（标题+居中左右箭头）

c4（标题+居底左右箭头）

d1（标题+底部圆形左右箭头）

远方 有一个地方 那里种有我们的梦想

某天 也许会相遇 相遇在这个好地方

不要太担心 只因为我相信 终会走过这条遥远的道路

OH PARA PARADISE 是否那么重要 你是否那么地遥远

d2（浮层标题+底部圆形控制点）

远方 有一个地方 那里种有我们的梦想

某天 也许会相遇 相遇在这个好地方

不要太担心 只因为我相信 终会走过这条遥远的道路

OH PARA PARADISE 是否那么重要 你是否那么地遥远

d3（标题+缩略图导航）

远方 有一个地方 那里种有我们的梦想

某天 也许会相遇 相遇在这个好地方

不要太担心 只因为我相信 终会走过这条遥远的道路

OH PARA PARADISE 是否那么重要 你是否那么地遥远

使用方法

直接使用

使用 Handlebars

云适配 WebIDE

数据接口

Slider 参数说明

远方有一个地方那里种有我们的梦想

某天也许会相遇相遇在这个好地方

不要太担心只因为我相信终会走过这条遥远的道路

OH PARA PARADISE 是否那么重要你是否那么地遥远

远方有一个地方那里种有我们的梦想

某天也许会相遇相遇在这个好地方

不要太担心只因为我相信终会走过这条遥远的道路

OH PARA PARADISE 是否那么重要你是否那么地遥远

远方有一个地方那里种有我们的梦想

某天也许会相遇相遇在这个好地方

不要太担心只因为我相信终会走过这条遥远的道路

OH PARA PARADISE 是否那么重要你是否那么地遥远